вкладки bootstrap-vue - открыть вкладку с указанием ссылки в URL - PullRequest
Новая
       8

вкладки bootstrap-vue - открыть вкладку с указанием ссылки в URL

0 голосов
/ 01 ноября 2018

Я использую bootstrap-vue для SPA и работаю над страницей, где нам нужно вложить некоторый контент в b-tabs.

По заданному URL-адресу с привязкой (например, www.mydomain.com/page123#tab-3) я хотел бы показать содержимое под Tab 3.

Вопрос: Как мне это сделать в bootstrap-vue? Есть ли встроенная функция, которую я могу использовать для этого? ссылка: (я не смог найти его в документах: https://bootstrap -vue.js.org / docs / components / tabs / )

Вот мой код: 

<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>

И это визуализированный html код: 

<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>

1 Ответ

0 голосов
/ 06 июля 2019

b-tabs предполагается использовать для локального (не-url) контента (опора href для b-tab устарела)

Однако вы можете легко использовать b-nav и div s для создания вкладок на основе навигации по URL: 

<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>

Предполагается, что вы используете маршрутизатор Vue.

...