如何直接链接到特定的JavaScript选项卡？

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.

Answer 1

例如，如果您要专门单击“条款”选项卡，则可以执行以下操作：

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

Answer 2

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.

Answer 3

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

Answer 4

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