title: Is there a way to use bootstrap tabs without using a unique identifier
body: <p>I would like to be able to use bootstrap tabs but without using a unique selector. </p>
  
  <p>I cannot guarantee that the selector is the only one in the dom. </p>
  
  <p>I have many sub templates which are either included in the page as it is rendered or can be loaded inside a modal via ajax. </p>
  
  <p>I do use id's but never in the templates i might use within a modal, some modals are preloaded after the page load event. </p>
  
  <pre><code>  &lt;div class="panel"&gt;
      &lt;div class="panel-heading"&gt;
         &lt;ul class="nav nav-tabs"&gt;
          &lt;li&gt;&lt;a data-target=".pane1" data-toggle="tab" aria-expanded="true"&gt;pane 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-target=".pane2" data-toggle="tab" aria-expanded="true"&gt;pane 2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;     
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
        &lt;div class="tab-content"&gt;
          &lt;div class="tab-pane pane1"&gt;pane 1&lt;/div&gt;
          &lt;div class="tab-pane pane2"&gt;pane 2&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I have tried an <code>onclick</code> event on the anchor tag with just jquery which is less than ideal, but cannot get it to work with the <code>.tab('show')</code></p>
  
  <pre><code>onclick="$(this).closest('.panel')
     .find('.tab-pane').hide();$(this).closest('.panel').find('.pane1').show();"
  </code></pre>