bootstrap-vue tabs - reveal specific tab content based on URL anchor tag

Question

bootstrap-vue tabs - reveal specific tab content based on URL anchor tag

For my SPA, I am utilizing bootstrap-vue and currently working on a page where nested content needs to be placed within b-tabs.

If given a URL with an anchor (e.g. www.mydomain.com/page123#tab-3), the goal is to display the content under Tab 3.

Query: How can this be achieved using bootstrap-vue? Is there a built-in function that allows for this functionality? Reference: (I have not found it in the documentation: )

This is the code snippet:

<b-tabs>

  <b-tab title="Tab 1" active>
    Tab 1 content
  </b-tab>

  <b-tab title="Tab 2">
    Tab 2 content
  </b-tab>

  <b-tab title="Tab 3">
    Tab 3 content
  </b-tab>

</b-tabs>

And below is the HTML output:

<div class="tabs">
  <div class="">
    <ul role="tablist" tabindex="0" class="nav nav-tabs">
      <li class="nav-item">
        <a role="tab" tabindex="-1" href="#" class="nav-link active">Tab 1</a>
      </li>
      <li class="nav-item">
        <a role="tab" tabindex="-1" href="#" class="nav-link">Tab 2</a>
      </li>
      <li class="nav-item">
        <a role="tab" tabindex="-1" href="#" class="nav-link">Tab 3</a>
      </li>
    </ul>
  </div>
  <div class="tab-content">
    <div class="tab-pane show fade active">
      Tab 1 content
    </div>
    <div class="tab-pane fade" style="display: none;">
      Tab 2 content
    </div>
    <div class="tab-pane fade" style="display: none;">
      Tab 3 content
    </div>
  </div>
</div>

javascript vue.js bootstrap-4 bootstrap-vue

Answer 1

Answer №1

b-tabs should be utilized for local content instead of URLs (the href prop on b-tab is no longer recommended)

Alternatively, you can easily create URL-based tabs using b-nav and div:

<div class="tabs">
  <b-nav tabs>
    <b-nav-item to="#" :active="$route.hash === '#' || $route.hash === ''">
      One
    </b-nav-item>
    <b-nav-item to="#two" :active="$route.hash === '#two'">
      Two
    </b-nav-item>
    <b-nav-item to="#three" :active="$route.hash === '#three'">
      Three
    </b-nav-item>
  </b-nav>
  <div class="tab-content">
    <div :class="['tab-pane', { 'active': $route.hash === '#' || $route.hash === '' }]" class="p-2">
      <p>Tab One (default) with no hash</p>
    </div>
    <div :class="['tab-pane', { 'active': $route.hash === '#two' }]" class="p-2">
      <p>Tab One with hash #two</p>
    </div>
    <div :class="['tab-pane', { 'active': $route.hash === '#three' }]" class="p-2">
      <p>Tab One with hash #three</p>
    </div>
  </div>
</div>

This method assumes that Vue router is being used.

Answer 2

b-tabs should be utilized for local content instead of URLs (the href prop on b-tab is no longer recommended)

Alternatively, you can easily create URL-based tabs using b-nav and div:

<div class="tabs">
  <b-nav tabs>
    <b-nav-item to="#" :active="$route.hash === '#' || $route.hash === ''">
      One
    </b-nav-item>
    <b-nav-item to="#two" :active="$route.hash === '#two'">
      Two
    </b-nav-item>
    <b-nav-item to="#three" :active="$route.hash === '#three'">
      Three
    </b-nav-item>
  </b-nav>
  <div class="tab-content">
    <div :class="['tab-pane', { 'active': $route.hash === '#' || $route.hash === '' }]" class="p-2">
      <p>Tab One (default) with no hash</p>
    </div>
    <div :class="['tab-pane', { 'active': $route.hash === '#two' }]" class="p-2">
      <p>Tab One with hash #two</p>
    </div>
    <div :class="['tab-pane', { 'active': $route.hash === '#three' }]" class="p-2">
      <p>Tab One with hash #three</p>
    </div>
  </div>
</div>

This method assumes that Vue router is being used.

Answer 3

Answer №2

Here is a workaround I came up with for anyone trying to tackle this issue:

<template>
  <b-card no-body>
    <b-tabs card :value="activeTabIndex" @input="changeRoute">
      <b-tab title="A" no-body>
        <p>Content A</p>
      </b-tab>
      <b-tab title="B" no-body>
        <p>Content B</p>
      </b-tab>
      <b-tab title="C" no-body>
        <p>Content C</p>
      </b-tab>
    </b-tabs>
  </b-card>
</template>

<script>
export default {
  data: () => {
    return {
      tabsPathsDictionary: ['/[yourPathToTabs]/a', '/[yourPathToTabs]/b', '/[yourPathToTabs]/c']
    }
  },
  computed: {
    activeTabIndex () {
      const route = this.$route.path.toLowerCase();
      const index = this.tabsPathsDictionary.findIndex(element => element === route) || 0; 
      return index;
    }
  },
  methods: {
    changeRoute (value) {
      this.$router.push(this.tabsPathsDictionary[value])
    }
  }
}
</script>

The typical active property on the default tab cannot be utilized in this solution, as it will always redirect to that tab upon reload. This approach can be adapted for use with URL parameters by leveraging this.$route.params instead of this.$route.path (requiring some adjustments). It's important to note that this example assumes the use of Vue Router.

Answer 4

Here is a workaround I came up with for anyone trying to tackle this issue:

<template>
  <b-card no-body>
    <b-tabs card :value="activeTabIndex" @input="changeRoute">
      <b-tab title="A" no-body>
        <p>Content A</p>
      </b-tab>
      <b-tab title="B" no-body>
        <p>Content B</p>
      </b-tab>
      <b-tab title="C" no-body>
        <p>Content C</p>
      </b-tab>
    </b-tabs>
  </b-card>
</template>

<script>
export default {
  data: () => {
    return {
      tabsPathsDictionary: ['/[yourPathToTabs]/a', '/[yourPathToTabs]/b', '/[yourPathToTabs]/c']
    }
  },
  computed: {
    activeTabIndex () {
      const route = this.$route.path.toLowerCase();
      const index = this.tabsPathsDictionary.findIndex(element => element === route) || 0; 
      return index;
    }
  },
  methods: {
    changeRoute (value) {
      this.$router.push(this.tabsPathsDictionary[value])
    }
  }
}
</script>

The typical active property on the default tab cannot be utilized in this solution, as it will always redirect to that tab upon reload. This approach can be adapted for use with URL parameters by leveraging this.$route.params instead of this.$route.path (requiring some adjustments). It's important to note that this example assumes the use of Vue Router.

bootstrap-vue tabs - reveal specific tab content based on URL anchor tag

Answer №1

Answer №2

Similar questions

Adding individual buttons at the bottom of each data row using Jquery: A step-by-step guide

Trigger an alert message upon loading the HTML page with search text

Breaking up an array of objects into separate arrays based on a specific key using JavaScript

Tips for retrieving data from a Node.js server with a POST request in a React application

The PHP script's header() function is failing to execute

Has Prettier or ESLint in VSCode split this line in Vue.js HTML?

EdgeDriver with Selenium and Java can be interrupted by a modal window dialog box, causing the test script to pause its execution

Start the Vuepress build process and run the generated project

Exploring the World of Images with Javascript

How can I navigate between pages without losing the data entered in the form fields

Validating a particular value using Regex in React Formik

Reaching the maximum request threshold

Show unique language text in the <noscript> element based on the user's browser language

A TypeScript/Cypress command that restricts input parameters to specific, predefined values

Clicking two times changes the background

What is the best way to halt execution in Express.js following an error caught from an Await request?

Passing data between API tests in JavaScript

Static addition of the Button to the parent div is crucial for seamless

Error: The variable YouTube has not been declared within this context / YouTube API

Combining several JSON objects into a single JSON object using JavaScript