Создать 2 таба в bootstap?

Question

[TheTrace]

Как создать 2 таба в bootstrap v.4. Пример: когда я нажимаю на вкладку Messagge из 1 таба выводится панель Message и вкладка становится активной. Потом когда я нажимаю на вкладку Home из 2 таба выводится панель Home. Суть проблемы в том, что когда я хочу зайти во вкладку Message из 1 таба, то она не отобразится, так как по идее уже активна и нажимать её нельзя. Можно как либо сразу убирать её "активность" чтобы такой проблемы не было? На картинке, я хочу чтобы я мог переходить из элемента в элемент свободно

<ul class="nav nav-tabs" id="myTab" role="tablist" >
      <li class="nav-item">
        <a class="nav-link active" id="home-tab1" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="profile-tab1" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="messages-tab1" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="settings-tab1" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
      </li>
    </ul>
    <ul class="nav nav-tabs" id="myTab1" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
        </li>
      </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
      <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
      <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">Message</div>
      <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">Setting</div>
    </div>

Answer 1

[Dmitry Bay]

Выставляйте разные ID в двух табах.

id по правилам html должен быть уникален на странице.

Comments

[TheTrace]

Поменял, проблема все та же(

[Dmitry Bay]

TheTrace, врете.

• этот ид отвечает за весь навбар. он не обязателен
  
  

<a class="nav-link active" id="home-tab1" data-toggle="tab" {href="#home"} role="tab" aria-controls="home" aria-selected="true">Home</a>
  <a class="nav-link active" id="home-tab" data-toggle="tab" {href="#home"} role="tab" aria-controls="home" aria-selected="true">Home</a>
       <div class="tab-pane active" {id="home"} role="tabpanel" aria-labelledby="home-tab">Home</div>

У вас ссылка таба идет на #home (первые два href), которые ведут соответсвенно на таб Home с id = #home

ставьте другой href на другой объект, и они уже не будут зависимы.

[TheTrace]

Dmitry Bay, Черт.... я все равно не могу перейти Сразу в Message из второго таба ибо он уже активный и на него нажать ещё раз не могу

[Dmitry Bay]

TheTrace, У вас два там с одинаковыми кнопками? Ну повесьте событие на ссылку, которое помимо того, что делает активным оба поля в разных местах, убирает класс активности.

[TheTrace]

Ииии... Собственно как это сделать?

[Dmitry Bay]

TheTrace, так уж и быть, помогу вам.
https://jsfiddle.net/ оформите код тут с табами.

[TheTrace]

https://jsfiddle.net/TheTraceArtem/fakrudsj/1/
Заранее спасибо)

[Dmitry Bay]

TheTrace, https://jsfiddle.net/fakrudsj/7/