title: Bootstrap 4: dropdown tab items can only be selected once
body: <p>Well I am trying to build a tab system with bootstrap 4, and since there are more than 5 tabs(a total of 7), I decide to use a dropdown tab to put the last 3 tabs as dropdown items to the fifth tab(as parent tab). The code looks like below:</p>
  
  <pre><code>  &lt;ul class="nav nav-tabs nav-justified"&gt;
      &lt;li id="atab1" class="nav-item"&gt;&lt;a href="#tab1" data-toggle="tab" class="nav-link active"&gt;Basic Info&lt;/a&gt;&lt;/li&gt;
      &lt;li id="atab2" class="nav-item"&gt;&lt;a href="#tab2" data-toggle="tab" class="nav-link"&gt;Additional Info&lt;/a&gt;&lt;/li&gt;
      &lt;li id="atab3" class="nav-item"&gt;&lt;a href="#tab3" data-toggle="tab"class="nav-link"&gt;Contact List&lt;/a&gt;&lt;/li&gt;
      &lt;li id="atab4" class="nav-item"&gt;&lt;a href="#tab4" data-toggle="tab" class="nav-link"&gt;Posts &amp; Comments&lt;/a&gt;&lt;/li&gt;
      &lt;li id="atab5" class="nav-item dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"&gt;More&lt;/a&gt;
          &lt;div class="dropdown-menu"&gt;
              &lt;a data-toggle="tab" class="dropdown-item" href="#tab5"&gt;Goods &amp; Products&lt;/a&gt;
              &lt;a data-toggle="tab" class="dropdown-item" href="#tab6"&gt;Services &amp; Projects&lt;/a&gt;
              &lt;a data-toggle="tab" class="dropdown-item" href="#tab7"&gt;Jobs &amp; Offers&lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>However I am encountering a strange issue, it seems that each dropdown item in the tab can only be selected once. This means that if I navigate to another tab, I wont be able to select it again. I investigated the issue further, and it seems that once I select an item from the dropdown list, it stays 'selected' forever until I refresh the page. The below screenshot shows that both goods and services tabs are selected and active, if I select one first and switch to another(while in reality, selecting one tab should cancel the other tab and make it inactive). </p>
  
  <p><a href="http://oi59.tinypic.com/33gx.jpg" rel="nofollow">http://oi59.tinypic.com/33gx.jpg</a> </p>
  
  <p>So anyone know how to fix this issue? I've been trying my best but still cant find a way. </p>