title: How do I add this .tablink class to my in-content links to link between tabs with JavaScript
body: <p>The following code creates 3 bootstrap tabs.  The JavaScript code is supposed to load the pane for the tab that is clicked on.  The instructions were to "Use a .tablink class on your in-content links to link between tabs."  I am a newbee to JS. Where do I add the tablink class to get this Javascript code to work?</p>
  
  <pre><code>&lt;div id="tabs"&gt;
      &lt;ul class="nav nav-tabs-tablink" id="prodTabs"&gt;
          &lt;li class="active"&gt;&lt;a href="#tab_basic"&gt;Basic&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab_images" data-url="?action=images"&gt;Images&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab_videos" data-url="?action=videos"&gt;Videos&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="tab-content"&gt;
          &lt;div id="tab_basic" class="tab-pane active"&gt; Basic content&lt;/div&gt;
          &lt;div id="tab_images" class="tab-pane active"&gt; Images content&lt;/div&gt;
          &lt;div id="tab_videos" class="tab-pane active"&gt; Videos content&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $('#tabs').on('click', '.tablink,#prodTabs a', function (e) {
          e.preventDefault();
          var url = $(this).attr("data-url");
          alert(url);
          if (typeof url !== "undefined") {
              var pane = $(this), href = this.hash;
  
              // ajax load from data-url
              $(href).load(url, function (result) {
                  pane.tab('show');
              });
          } else {
              $(this).tab('show');
          }
      });
  &lt;/script&gt;
  </code></pre>