Possible to keep multiple tabs in sync?

[GijsGoudzwaard]

So for my documentation site I have something like this:

:::: tabs :options="{ useUrlFragment: false }"
::: tab PHP
 // Some code
:::
::: tab Javascript
 // Some code
:::
::::

And then on another page I have the same setup. Is it possible that when I click on, for example, javascript that that decision would retain on each page? So that on each page the javascript tab is active?

[PeppeL-G]

That's a feature I would appreciate as well, but it would probably be better to implement it in vue-tabs-component, which has been abandoned.

[pskordilakis]

For tabs in the same page it can be done by not disabling the url fragments and not deduplicating the ids. It works because tabs have the same id (not a good practice).

With the current component I don't think there is an alternative way to achieve this functionality.

[GijsGoudzwaard]

@pskordilakis It does indeed work for the same page. However when useUrlFragment is set to true the page jumps to the element, which I don't want. Is there an option to not jump to the element?

[pskordilakis]

I am not sure how to avoid the jump to the element. When useUrlFragment is set to true it creates anchors (#) and the behaviour of the browser is to jump to the element.

[tomsun]

I too would find this useful

example: select your favourite programming language, then all snippets on the page update: https://firebase.google.com/docs/firestore/query-data/queries (seems the choice is sticky across page loads in their case (cookie or localstorage?), but a url fragment that doesn't have to be duplicated in the markup would be a nice start)

[evaera]

@pskordilakis @GijsGoudzwaard It's possible to prevent the jump with some code like this:

<script>
 export default {
   mounted () {
     this.$nextTick(() => {
       document.querySelectorAll(".tabs-component-tab a").forEach(el => {
         el.addEventListener("click", e => {
           e.preventDefault()
           history.pushState(null, null, el.href)
         })
       })
     })
   }
 }
</script>