jQuery Tabbed Problem

Question

hey i got a problem ...

I want to add the 3rd tab link to other website and when it is clicked it redirects me to the home page first tab. not 3rd tab.

here is a example of linking used in the website.

<li><a href="#tab1">HOME</a></li>  
<li><a href="#tab2">About us</a></li>  
<li><a href="#tab3">services</a></li>  

and on other website I added  
<li><a href="http://www.mywebsitename.com/#tab1"&gt;HOME&lt;/a&gt;&lt;/li&gt;  
<li><a href="http://www.mywebsitename.com/#tab2"&gt;About us</a></li>  
<li><a href="http://www.mywebsitename.com/#tab3"&gt;services&lt;/a&gt;&lt;/li&gt;  

whereever you click you will go to homepage. Is there any solution for that please?

Answer 1

Where's the jQuery?

Answer 2

While your question is not very clear, i am assuming you are using some jqeury plugin to convert the divs to tabbed pages.

You will need to check, on load, what url you received, and jump to the correct tab (activate the correct div). Without any more code from your side, it is hard to get any more concrete than this.

Answer 3

Like everybody else I'm not sure what you are asking for, but if you want a url with a hash anchor at the end to automatically select one of the tabs, I think this will work for you.

<script type="text/javascript">
$(function() {
    $('div#tabs').tabs({ selected: 0 });
    // Select the tab based on the url's hash anchor
    var index = $('div#tabs div.ui-tabs-panel').index($(document.location.hash));
    $('div#tabs').tabs('select', index >= 0 ? index : 0);
});
</script>

<!-- Tabs -->
<div id="tabs">
  <ul>
    <li><a href="#tab1">HOME</a></li>
    <li><a href="#tab2">About us</a></li>
    <li><a href="#tab3">Services</a></li>
  </ul>
  <!-- individual tab content divs -->
  <div id="tab1">Home sweet home!</div>
  <div id="tab2">This is a page about us.</div>
  <div id="tab3">At your service.</div>
</div>