Find solution
How to link inside a specific jquery tab?

jQuery tabs: how to create a link to a specific tab?

  • I'm using a simple jQuery script for tabs: The JS: $(document).ready(function() { $(".tab-content").hide(); $("ul.tabs li:first").addClass("active").show(); $(".tab-content:first").show(); $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab-content").hide(); var activeTab = $(this).find("a").attr("href"); $(activeTab).show(); return false; }); }); The HTML (for the index.html): <div id="tabs"> <ul class="tabs"> <li><a href="#tabs-voters">Top Voters</a></li> <li><a href="#tabs-commenters">Top Commenters</a></li> </ul> <div id="tabs-voters" class="tab-content"> <p id="h1-01">Tab content</p> <p>Some content</p> </div> <div id="tabs-commenters" class="tab-content"> <h2 id="h-02">Tab content</h2> <p>Some content</p> <h2 id="h-03">Tab content</h2> <p>Some content</p> </div> </div> What I need to do is to create a working link to index.html#h-02, index.html#h-03 etc., but these simple links don't work because the tab is hidden by default. Is it possible to modify the JS, so I can link to a bookmark in tabs that are hidden when opening index.html? Can someone point me in the right direction? Thanks a lot! :)

  • Answer:

    In your document ready handler, you can examine the value of the fragment and use JavaScript to show the corresponding tab. $(document).ready(function () { ... var tabId = window.location.hash; // will look something like "#h-02" $(tabId).click(); // after you've bound your click listener }); Edit as requested: $(document).ready(function() { $(".tab-content").hide(); $("ul.tabs li:first").addClass("active").show(); $(".tab-content:first").show(); $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab-content").hide(); var activeTab = $(this).find("a").attr("href"); $(activeTab).show(); return false; }); $(window.location.hash).click(); // super-simple, no? :) }); Edit 2: If you want to be able to specify an ID of a tab content element (like h-02 in the page you linked) then you have to work backwards to get the ID of the corresponding tab to activate it. Like this: $(document).ready(function() { var $tabContent = $(".tab-content"), $tabs = $("ul.tabs li"), tabId; $tabContent.hide(); $("ul.tabs li:first").addClass("active").show(); $tabContent.first().show(); $tabs.click(function() { var $this = $(this); $tabs.removeClass("active"); $this.addClass("active"); $tabContent.hide(); var activeTab = $this.find("a").attr("href"); $(activeTab).show(); return false; }); // Grab the ID of the .tab-content that the hash is referring to tabId = $(window.location.hash).closest('.tab-content').attr('id'); // Find the anchor element to "click", and click it $tabs.find('a[href=#' + tabId + ']').click(); }); Using http://api.jquery.com/closest means that the hash can specify the ID of the .tab-content itself (such as tabs-commenters in your example), or a child thereof. I've made some other cleanup suggestions as well above. No need to keep re-selecting those DOM elements!

klavina at Stack Overflow Visit the source

Was this solution helpful to you?

Other answers

Well, you can make your URL something like http://site.com/index.html?voters and then in the page, you check window.location.search (search being the bit including the question mark). If it's "?voters" then you run the code to select the tab. If it's "?commenters" then you run the code to select that tab. Et cetera.

Anthony Mills

You could pass a parameter to the webpage via GET. i.e. www.yourpage.com?tab=tab1 then for example (using php) <?php $tab = $_REQUEST['tab']; ?> then in your JS code, you can do something like: var default_id = <?php echo $tab; ?> $("#"+default_id).addClass("active").show(); though you should check to make sure the default_id is valid, and if not load a working default(like you already do) Edit I just noticed the question was wanting to use URLs formated like, www.example.com#h-02 in which you're better off sticking to using JS only

Kenny Cason

I would try to modify your code a bit. This is how I would do it: http://jsfiddle.net/RtCnU/8/ This way you accomplish exactly what you wanted. This is the code that I used: <div id="tabs"> <ul class="tabs"> <li><a href="#tabs-voters">Top Voters</a></li> <li><a href="#tabs-commenters">Top Commenters</a></li> </ul> <div id="wrap"> <div id="tabs-voters" class="tab-content"> <p id="h1-01">Tab content</p> <p>Some content</p> </div> <div id="tabs-commenters" class="tab-content"> <h2 id="h-02">Tab cdsfdfontent</h2> <p>Some contesdfdsfsdfant</p> </div> </div> </div> and this is the Javascript: $(document).ready(function() { $(".tab-content").hide(); $("ul.tabs li a:first").addClass("active").show(); $("#wrap > div").hide().filter(":first").show(); $("ul.tabs li a").click(function() { $("ul.tabs li > a").removeClass("active"); $(this).addClass("active"); $("#wrap > div").hide(); var activeTab = $(this).attr("href"); $(activeTab).show(); return false; }); }); Let me know how it works out!

Amit

nothing seems to work for me: //Default Action jQuery(".tab_content").hide(); //Hide all content jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab jQuery(".tab_content:first").show(); //Show first tab content //On Click Event jQuery("ul.tabs li").click(function() { jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class jQuery(this).addClass("active"); //Add "active" class to selected tab jQuery(".tab_content").hide(); //Hide all tab content var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content jQuery(activeTab).fadeIn(); //Fade in the active content return false; });

adry

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.