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

时间:2011-10-05 19:31:02

标签: javascript jquery

我的网页位于http://www.sarahjanetrading.com/js/resume

所有HTML,CSS和jQuery代码+图像都可供任何人访问。

我的问题是,当我点击标签的achor标签时,我的jQuery代码会使标签显示标签内容。但是标签没有变成点击的标签。(标签名称保持不变)。

当我单击选项卡的相应li时,选项卡将更改为单击的选项卡。我想要的是当我单击选项卡的li或选项卡的锚点时,选项卡更改和选项卡的内容都会显示。

4 个答案:

答案 0 :(得分:1)

您注册了两个事件。一个在锚上,另一个在lis上。 lis上的那个更改了标签本身的活动状态,而锚点上的那个更改了内容。你应该把它们组合成一个函数。

您可以通过单击它的最下边缘来更改检查li功能是否正常工作。因为你的主播javascript有一个return false声明,所以它阻止点击事件冒泡到li,因此没有显示更改。

答案 1 :(得分:1)

尝试更改功能:

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

以下内容:

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

这应该可以,你应该能够删除你的其他javascript函数。

答案 2 :(得分:0)

如果您已经使用jQuery,则可以使用jQueryUI库来创建选项卡。它非常简单,风格很容易改变。这是选项卡的教程:

jQuery UI - Tabs Demo

答案 3 :(得分:0)

如果单击选项卡中文本周围的空白,则可以正常工作。从选项卡内部删除锚链接,或为锚链接添加单击处理程序。

修改
我的错。您的anchor元素上有一个点击处理程序,但点击anchor链接会使其在您的代码中变为$(this)。因此,当您要将class="active"分配给anchor时,请将li分配给$(this).addClass("active");

li
应该重写

以修改li。就个人而言,我会将<a href="#something"><li></li></a> 包装在锚链接中:

{{1}}

这可能需要稍微修改一下JS代码,但会得到统一的结果。