How to open a tab with a link? Created Nov 2, 2009

I found that if you enable the history plugin, if you just use the link to the anchor, it works.

I had this problem too, but i think i have a solution:
- Take a source code of tools.tabs-1.0.4.js and find the lines ~234 - 237 there is a code there

// cross tab anchor link
  panes.find("a[href^=#]").click(function(e) {
  self.click($(this).attr("href"), e);		
  }); 

it's a code for cross-links, but the "find area" only inside the 'panes'. If you simply correct (replace) it to:

// find cross-tabs in whole document, not only in panes
  $("*",document.body).find("a[href^=#]").click(function(e) {
  self.click($(this).attr("href"), e);		
  }); 

it will take a cross-links in whole document, not only in the "panes".

I do this, it works (tested: IE 7,8, FF, Chrome, Opera). If nessesary, i can show an exaple (but it in Russian, if this not so problem :))

Luck!

Opening a specified tab was working :)

How about opening the tab and making it jump to an anchor inside the content? is this possible?

<a href="#2ndTitle">jump</a>

<ul class="tabs">  
    <li><a href="#tab1">Tab 1</a></li>  
    <li><a href="#tab2">Tab 2</a></li>  
    <li><a href="#tab3">Tab 3</a></li>  
</ul>  
  
<!-- tab "panes" -->  
<div class="panes">  
    <div>First tab content. Tab contents are called "panes"</div>  
   
    <div>   
    <h2>Second tab content<h2>
    <p>blah... blah...</p>

    <a id="2ndTitle" name"2ndTitle"></a>
    <h2>second title</h2>
    <p>blah... blah...blah... blah...blah... blah...</p>
    </div>  

    <div>Third tab content</div>  
</div> 

Assume a user bookmarks a url including the hash to activate the 2nd tab. When the page is loaded the first tab is always active. The initialIndex property isn't set in the tabs config.

Is there anything special you need to do?

In fact, I can't even get links within a tab pane to activate other tabs by using the href="#tabName".

In order for me to get the links working i had to manually bind my links to the click event and then use the tabs api handle to activate the proper tab.

I'm using the latest jQuery with tools 1.1.2 (tabs 1.0.4).

The only thought I have on this is maybe its broken because the tabs are using 'li' in the config rather than an anchor. I needed to use the 'li' because I need the 'active' class put on that element rather than the 'a' element. This is because I'm using image backgrounds on the tabs following the sliding doors technique.

<div class="contentTabWrapper">
    <ul class="contentTabs">
         <li class="active"><a href="#myNumbers">My Numbers</a></li>
         <li><a href="#addNumbers">Add a Local Number</a></li>                      
    </ul>
</div>

<div class="content">
<div class="tabPane" id="myNumbers">Tab content 1
     <a href="#addNumbers">Tab 2 anchor</a>
</div>
<div class="tabPane" id="addNumbers" style="display:none;">Tab Content 2 </div>
</div>

$("ul.contentTabs").tabs("div.content > div.tabPane", {
	current: 'active',
	tabs: 'li'
});

Ideas?

I have the same problem than pkrasko : the direct link to the tab (ie www.example.com/index.php#comments) isn't working : it doesn't select the correct tab (the first in fact) because I use tabs: 'li' option.

It would be great if someone could help us, if it's possible (maybe the current version 1.1.2 doesn't allow this feature)

Yep, I'm having the same problem as well - when I create a link and then click on it - it adds the #link to the end of the url but fails to change the tab. Help!

Does anyone have an answer to this? It's currently great that I can open a tab from within the tabs div but I really need to open up a link from outside the tab.

You have to have the history plugin for the direct link to the tab to work.
http://flowplayer.org/tools/tabs.html#history

Once you have the plugin setup and working, then you can create link to the tab

<a href="http://domain.tld/page.html#tab1">Tab1</a>

This is how i got it working.

Thank you, thank you.

I just added history true like this:

$("ul.tabs").tabs("div.panes > div", { history: true });

And it works perfectly :)

Ok, trying to get this to work on my end so I can do some hard linking. Anybody see anything wrong with this?

http://ignacio-design.com/ecd/encino_cosmetic_dentistry_services.html

I'm not even getting the '#' anymore. Maybe I broke something... oye. I want to use this so I can hard link the footer links at the bottom. They all don't have to be put in a div pane correct?

- nick