Создание 2 nav в bootstarp 4?

Question

TheTrace @TheTrace

Создание 2 nav в bootstarp 4?

Хочу создать 2 навбара на bootstrap. Но при нажатии на элемент из первого таба, а потом и на элемент из второго нава, в элемент первого перейти уже нельзя. Как я понял, так как он активный и перейти из него в него же уже нельзя. Как это исправить и можно ли сделать так чтоб при нажатии на элемент таба он сразу же сбрасывался? Кстати, этот же код в bootstrap 3 работает, там если на открытый элемент таба нажать, он просто перезагрузиться

<html >
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    
    <title>Тест</title>
  </head>
  <body style="background-color: black">
    <br>
    <nav align="center" class="container-fluid nav nav-pills" role="tablist" id="nav-custom-tabs">
      <table >
        <tr><a id="a1" style="color: white" href="#product" role="tab"  data-toggle="tab">Продукты</a></tr>
        <tr><a id="a2" style="color: white" href="#contact" role="tab" data-toggle="tab">Контакты</a></tr>
        <tr><a id="a3" style="color: white" href="#cart" role="tab" data-toggle="tab">Корзина</a></tr>
      </table>
    </nav>

  <hr style=" color: white; height: 1px; background-color:white; margin-left: 40%; margin-right:40%;" />

  <div align="center" class="container-fluid nav nav-pills" role="tablist" id="nav-custom-tabs">
  <h1 align="center" style=" margin: 50px" ><a  style="color: white; text-decoration: none;" data-toggle="tab" href="#general">Тест</a></h1>
</div>
  <hr style=" color: white; height: 1px; background-color:white;
   margin-left: 25%;
   margin-right:25%;">
  
   <div style="margin: 10px" align="center" class="container-fluid ">
      <div class="container">
      <div class="nav nav-pills" role="tablist" id="nav-custom-tabs">
        <table>
        <tr><a id="a1" style="color: white" href="#general"   role="tab" data-toggle="tab">Главная</a></tr>
        <tr><a id="a2" style="color: white" href="#jeyses" role="tab" data-toggle="tab">Футболки</a></tr>
        <tr><a id="a3" style="color: white" href="#sweatshirt" role="tab" data-toggle="tab">Свитшоты</a></tr>
        <tr><a id="a3" style="color: white" href="#hoodies" role="tab" data-toggle="tab">Худи</a></tr>
      </table>
      </div>
    </div>
  </div>

  <hr style=" color: white; height: 1px; background-color:white;
  margin-left: 25%;
  margin-right:25%;">

  <div class="tab-content container">
      <div role="tabpanel" class="tab-pane fade" id="general"><p >Главная</p>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="product"><p>Футболки Свитшоты Худи</p>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="contact"><p >Контакты</p>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="cart"><p >Корзина</p>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="jeyses"> 
        <p>Футболки</p>
        <div align="center">
        </div>    
      </div>
      <div role="tabpanel" class="tab-pane fade" id="sweatshirt"><p>Свитшоты</p>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="hoodies"><p >Худи</p>
        
      </div>
      
    </div>
  </div>
</div>









  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>