How can I link directly to a specific JavaScript tab?

Question

My website has a tabbed interface that is used consistently throughout all of the pages. I can link to the base page (the first tab), but can't figure out how to link to a specific tab.

This is my JavaScript:

$(document).ready(function() {
  $(".tabs a").click(function() {
    var $this = $(this);
    $(".panel").hide();
    $(".tabs a.active").removeClass("active");
    $this.addClass("active").blur();
    var panel = $this.attr("href");
    $(panel).fadeIn(250);
    return false;
  });
$(".tabs li:first-of-type a").click();
});

And each of my pages is set up like this:

<div id="aboutContainer">
    <ul class="tabs">
        <li><a href="#panel1">About Us</a></li>
        <li><a href="#panel2">Contact Us</a></li>
        <li><a href="#panel3">Mailing List</a></li>
        <li><a href="#panel4">Terms</a></li>
        <li><a href="#panel5">Privacy Policy</a></li>
        <li><a href="#panel6">Help</a></li>
    </ul>
        <div class="panelContainer">
            <div class="panel" id="panel1">
                <?php include('includes/aboutme.php'); ?>
            </div>

            <div class="panel" id="panel2">
                <?php include('includes/contact.php'); ?>
            </div>

            <div class="panel" id="panel3">
                <?php include('includes/mailinglist.php'); ?>
            </div>

            <div class="panel" id="panel4">
                <?php include('includes/terms.php'); ?>             
            </div>

            <div class="panel" id="panel5">
                <?php include('includes/privacypolicy.php'); ?>
            </div>

            <div class="panel" id="panel6">
                <?php include('includes/cheekyreference.php'); ?>
            </div>
        </div>
</div>

Any pointers would be greatly appreciated. I'm pretty new to JavaScript and haven't been able to find an answer searching the web.

To clarify things a little:

If I'm on the about.php page, the tabbed interface works. But the kind of link I'm trying to make is as follows: If I were on another page, I'd like to link to a particular tab on the about page. I have a navigation footer and I'd like to be able to click on a hyperlink such as 'mailing list' or 'contact' and have the correct page show up as well as the correct tab.

can you elaborate a bit more on what you want to do what are you trying to link — EnigmaMaster, Apr 26 '12 at 16:50
If I'm on the about.php page, the tabbed interface works. But the kind of link I'm trying to make is as follows: If I were on another page, I'd like to link to a particular tab on the about page. I have a navigation footer and I'd like to be able to click on say 'mailing list' or 'contact' and have the correct page show up as well as the correct tab. I hope that clarifies. — Dominic, Apr 26 '12 at 16:52
I did. It works in browsers when JS is disabled, but doesn't go to the appropriate tab when JS is enabled. — Dominic, Apr 26 '12 at 18:31

score 1 · Answer 1 · answered Apr 26 '12 at 16:49

1

If you want to specifically click the Terms tab for example, you'd do:

$(".tabs a[href='#panel14']").click();

answered Apr 26 '12 at 16:49

Nadh

6,987
2
21
21

Christophe · Answer 2 · 2012-04-26T19:40:06.117

The technique to achieve this is to use the hash part of the url. For example:

about.php#panel1

Or, similar, with a hashbang:

about.php#!panel1

(The hashbang is a better choice if you are concerned with SEO.)

Then you need to include in your page a script that will detect the hash part of the url, and activate the tabs accordingly.

Sorry, I do this all the time but don't have a public example available. I'll update the post when I have one.

In jQuery it would look like this:

$(".tabs a[href="+window.location.hash+"]").click();

Note: you could also use a querystring, but a hash will prevent a page refresh if you are already on the page.

score 0 · Answer 3 · answered Apr 26 '12 at 16:57

0

$('a[href="#panel1"]').click(function() {
        //insert action here;
});

answered Apr 26 '12 at 16:57

EnigmaMaster

213
3
11

1

You should try to explain your answer as well, even if you think it is self explanatory - others may not. Just doing some stackoverflow.com/review, did not mod. – lsl Apr 26 '12 at 20:59

score 0 · Answer 4 · edited May 23 '17 at 12:33

Maybe this is overkill but you should be able to do it with client site routing.

You would first need to set up your "routes" that get activated based on the url in the address bar then you can have links in the following format link to tab1 on about and in the activated route activate the appropriate tab (fire the click event on that tab).

Here's a link to a jQuery plugin to provide JavaScript routing

http://jsrouter.codeplex.com/

There are of course other routing solutions, here's a link to a stackoverflow post on the subject javascript clientside routing/pathing library

How can I link directly to a specific JavaScript tab?

4 Answers4