单击时会显示jQuery选项卡和选项卡内容吗？

Question

My webpage is at http://www.sarahjanetrading.com/js/resume

All the HTML, CSS and jQuery code + images are available there for anyone to access.

My issue is that currently my jQuery code makes the tabs show the tab-content when I click on the achor tag of the tab. But the tab doesnt change into the clicked tab.(tab name remains the same).

And the tab changes into the clicked tab when i click on the respective li of the tab. What I want is that both the tab changes and the content of the tab shows when I click on the either the li of the tab or the anchor of the tab.

Answer 1

You have two lots of events registered. One on the anchors and the other on the lis. The one on the lis changes the active state for the tabs themselves while the one on the anchors change the content. You should combine these into one function.

You change check the li function is working by clicking on the very bottom edge of it. Because your anchor javascript has a return false feclaration it is preventing the click event bubbling up to the li, thus not showing the change.

Answer 2

Try changing the function:

 $("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;
    });

to the following:

 $("ul.tabs li a").click(function() {
        $(".active").removeClass("active");
        $(this).addClass("active");
        $("#wrap > div").hide();
        $(".active-tab").removeClass();
        $(this).parent().addClass("active-tab");
        var activeTab = $(this).attr("href");
        $(activeTab).show();
        return false;
    });

This should work and you should be able to remove your other javascript function.

Answer 3

If you already use jQuery you can use the jQueryUI library to create tabs. It is very simple and the style can easily be changed. Here is the Tutorial for tabs:

jQuery UI - Tabs Demo

Answer 4

If you click the whitespace around the text in the tabs, it works. Remove the anchor link from inside the tab, or add a click handler for the anchor link.

Edit:
My mistake. You have a click handler on your anchor element, but clicking the anchor link causes it to become $(this) in your code. So you assign class="active" to the anchor , when you want to assign it to the li .

$(this).addClass("active");

should be rewritten to modify the li . Personally, I would wrap the li in the anchor link:

<a href="#something"><li></li></a>

This will probably require modifying your JS code a little, but will give a uniform result.