Question

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

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

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

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

Answer 1

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

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

Answer 2

尝试更改功能：

 $("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函数。

Answer 3

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

jQuery UI - Tabs Demo

Answer 4

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

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

li
应该重写
以修改li。就个人而言，我会将<a href="#something"><li></li></a>包装在锚链接中：

{{1}}

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

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

4 个答案: