Bootstrap 4 JS вкладка меню - PullRequest
Новая
       35

Bootstrap 4 JS вкладка меню

0 голосов
/ 28 января 2019

у меня есть этот код, и он работает, но не работает должным образом. 

<div class="row">
<div class="col-4">
    <strong>Ⅰ. Main A</strong>
    <ul class="nav flex-column list-style">
        <li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
        <li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
        <li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
    </ul>
    <strong>Ⅱ Main B</strong>
    <ul class="nav flex-column list-style">
        <li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
    </ul>
</div>
<div class="col-8 border-left ">
    <div class="tab-content ">
        <div class="tab-pane scroll-able" id="item1">
            <h3>A 1</h3>
        </div>
        <div class="tab-pane scroll-able" id="item2">
            <h3>A 2</h3>
        </div>
        <div class="tab-pane scroll-able" id="item3">
            <h3>A 3</h3>
        </div>
        <div class="tab-pane scroll-able" id="item4">
            <h3>B 1</h3>
        </div>
    </div>
</div>

, когда я нажимаю каждый раз, он показывает содержимое правильно, но не работает должным образом и оставляет активным и показыватькласс, когда я нажимаю на другое подменю (например, B1 и A3 назад и вперед)

мои данные являются динамическими.

Ответы [ 2 ]

0 голосов
/ 28 января 2019

Я немного поиграл и заметил то, что вы сообщили, затем я пошел к источнику Bootstrap, который говорит, что это ограничение BS (см. show метод).

Затем простые опцииЯ вижу в основном 2:

  1. Обрабатывать щелчки вкладок вручную: https://getbootstrap.com/docs/4.0/components/navs/#via-javascript Рабочий пример : https://codepen.io/cdtapay/pen/bzegNB
  2. Не быть семантическим и хранить все ссылки в одном списке (ul), включая метки разделов. Рабочий пример : https://codepen.io/cdtapay/pen/QYNRwb

Надеюсь, это поможет.

ОБНОВЛЕНИЕ : Сообщается о проблеме утечки класса show: https://github.com/twbs/bootstrap/issues/28118

0 голосов
/ 28 января 2019

Я проверил его на codepen, и он работает как талисман, активный класс удаляется при нажатии другого переключателя.

https://codepen.io/fazlurr/pen/QYNPBe

<div class="row">
<div class="col-4">
    <strong>Ⅰ. Main A</strong>
    <ul class="nav flex-column list-style">
        <li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
        <li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
        <li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
    </ul>
    <strong>Ⅱ Main B</strong>
    <ul class="nav flex-column list-style">
        <li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
    </ul>
</div>
<div class="col-8 border-left ">
    <div class="tab-content ">
        <div class="tab-pane scroll-able" id="item1">
            <h3>A 1</h3>
        </div>
        <div class="tab-pane scroll-able" id="item2">
            <h3>A 2</h3>
        </div>
        <div class="tab-pane scroll-able" id="item3">
            <h3>A 3</h3>
        </div>
        <div class="tab-pane scroll-able" id="item4">
            <h3>B 1</h3>
        </div>
    </div>
</div>

Возможно, способ, которым вы генерируетеИдентификаторы не верны.

...