title: jQuery tabs programmatically call a URL based tab from within code
body: <h2>Situation</h2>
  <p>As you can see in the screenshot below, I have an area of my site which makes use of tabs to split up the user dashboard. The tab indexes along the top are declared as URLs and as a result jQuery creates the references at runtime. I would like the user to be able to click the &quot;here for free content&quot; link and the system calls the Free content tab. Let's call that URL &quot;testserver/user/free-content&quot; for the moment
  <img src="https://i.stack.imgur.com/pUNR4.png" alt="short screenshot" /></p>
  <h2>Issue</h2>
  <p>Now, I know how to programmatically deal with this situation when the tabs are declared on page as divs and have static IDs I may assign but, in this case, am not ashamed to say it has me a little stuck before I've even started.
  If I set an ID on the link, jQuery will overwrite it so, I can't use that approach.</p>
  <h2>Start of solution</h2>
  <p>What I'm thinking of is the following, sorry that for the moment, I don't have a fiddle, as/if I progress, I'll update the question.</p>
  <ul>
  <li>User clicks the link and jQuery picks up the event by checking if it hasClass('tab-url-call')</li>
  <li>Temporarily save the URL attribute</li>
  <li>Loop through the tab index
  <ul>
  <li>Check if URL attribute matches the temp stored</li>
  <li>If matching call this tab</li>
  <li><strong>This bit has me at an end of what to do</strong></li>
  </ul>
  </li>
  <li>Next</li>
  </ul>
  <h2>Update - Extra information</h2>
  <p>As requested, here is some HTML to demonstrate the current structure</p>
  <pre><code>&lt;div id=&quot;user-tabs&quot; class=&quot;tabs&quot;&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a href=&quot;#tab-user-home&quot;&gt;Welcome&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href=&quot;testserver/user/free-content&quot;&gt;Free content&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href=&quot;testserver/user/learning&quot;&gt;Learning&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      
      &lt;div id=&quot;tab-user-home&quot;&gt;
          &lt;h3&gt;You current have freen content &quot;showing&quot;&lt;/h3&gt;
          &lt;p&gt;
              This is just an information box to highlight that the user has an
              option set to show free content and inform them that they can 
              reach it via the tab controls or click
              &lt;a
                  class=&quot;tab-url-call&quot; 
                  href=&quot;testserver/user/free-content&quot;
              &gt;
              here for free content
              &lt;/a&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
              
  </code></pre>
  <p>Thank you for taking the time to read my question.</p>