title: Rename jQuery tab ID from #ui-tabs to something else
body: <p>I have jQuery tabs, the content of which is lazy loaded when a tab is clicked. This works great.</p>
  
  <pre><code>&lt;div id='tabs'&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href='url-to-content'&gt;&lt;span&gt;John&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='url-to-content'&gt;&lt;span&gt;Arnold&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='url-to-content'&gt;&lt;span&gt;Dilbert&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to have direct links to specific tabs, so that that particular tab is opened with that link. This is achieved for example by</p>
  
  <pre><code>http://www.example.com/tab_page#ui-tabs-2
  </code></pre>
  
  <p>I'd like to have the "ui-tabs-2" replaced by something meaningful, such as in this case</p>
  
  <pre><code>http://www.example.com/tab_page#dilbert
  </code></pre>
  
  <p>So basically I'd like to be able to rename the tab IDs from the jQuery default 'ui-tabs-1', 'ui-tabs-2' etc to something else.</p>
  
  <p>That was easy when the content was not lazy loaded, as I created the tab DIVs and IDs myself. But with lazy loading the DIV creation is taken care by jQuery and I can't find a way to affect it.</p>
  
  <p>I have tried placing the anchor in the URL like so</p>
  
  <pre><code>        &lt;li&gt;&lt;a href='url-to-content#dilbert'&gt;&lt;span&gt;Dilbert&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Not to much surprise, it didn't work.</p>
  
  <p>I'm aware that the DIV id after the hash # has limitations on what characters are accepted, but that is not a problem. That part is not 100% identical to the tab visible name, but just close.</p>
  
  <p>This is my first question and I've researched the issue for hours, but with no luck. I apologize if this has been discussed before and if so, kindly ask for a link to that question. I haven't been able to find this issue discussed before.</p>
  
  <p>Using jQuery v1.11.1 and jQuery UI - v1.10.4 (both most recent).</p>
  
  <hr>
  
  <p><strong>Update</strong>:</p>
  
  <p>Based on blgt's idea, I wrote a working solution with the same concept but slightly different implementation. In real life the number of tabs is not the same every time, so I ended up creating a JavaScript object on the fly and then using that to select the tab, like so:</p>
  
  <pre><code>var tabs = {
      '#john' : 0,
      '#arnold' : 1,
      '#dilbert' : 2
  
      // There are more tabs
  }
  
  if(window.location.hash in tabs) {
      $('#tabs').tabs('option', 'active', tabs[window.location.hash]);
  }
  </code></pre>