jQuery隐藏/显示2个菜单

大家好

我有以下问题：我有一个产品的菜单和另一个产品的菜单。事情是这样的：

$(document).ready( function() {
    $("#product1").addClass("active");
    $("#menu2").hide();

    $("#product2").click(function () {
         $("#menu1").hide();
         $("#menu2").show();
         $("#product1").removeClass("active");
         $("#product2").addClass("active");
    });
    $("#product1").click(function () {
         $("#menu2").hide();
         $("#menu1").show();
         $("#product2").removeClass("active");
         $("#product1").addClass("active");
    });
 });

产品1 |产品2

家庭选项1选项2选项3 |选项1选项2选项3

其中前3个选项用于Product1，后3个选项用于Product2。我只需要看一种产品的菜单

我的HTML格式如下（当然是简化）：

问题：当我第一次加载页面时，一切正常。例如，当我单击#product2时，它会执行函数中指定的所有操作：

 $("#product2").click(function () {
         $("#menu1").hide();
         $("#menu2").show();
         $("#product1").removeClass("active");
         $("#product2").addClass("active");
    });

但它也执行前两行：

    $("#product1").addClass("active");
    $("#menu2").hide();

我同时激活了#product1和#product2，并隐藏了两个菜单。有什么想法吗？

---

提前谢谢

您应该通过返回false来防止单击事件的默认操作。这样，您的页面将不会被重新加载

像这样的事情应该可以做到：

$(document).ready(function () {
    $("#product1").addClass("active");
    $("#menu2").hide();

    $("#product2").click(function () {
        $("#menu1").hide();
        $("#menu2").show();
        $("#product1").removeClass("active");
        $("#product2").addClass("active");
        return false;
    });
    $("#product1").click(function () {
        $("#menu2").hide();
        $("#menu1").show();
        $("#product2").removeClass("active");
        $("#product1").addClass("active");
        return false;
    });
});

---

简短回答：您需要在函数中添加

return false

额外信息：

在脚本开始时，您有以下内容：

$("#product1").addClass("active");
$("#menu2").hide();

我倾向于在HTML或CSS中的某个地方分配这些属性，以便

product1

具有

active

类，等等

最后，您是否考虑过只使用jQuery Accordion或Tabstrip组件

---

看起来你的例子很好。。。它在JSFIDLE上有，但在我的web项目中没有。也许我应该在ASP.NET Web表单项目中提到它。这种行为在我看来也很奇怪，但我找不到背后的原因。你能试着用一些断点来消除bug，一步一步地观察你的代码在点击后会去哪里吗？这段代码非常简单，错误仍然很奇怪。当导航到

#

时，页面不会重新加载，它不应该重新加载，但如果返回false，一切正常。非常感谢。wise的话：WebForms不太适应这样的客户端脚本。它试图通过ViewState为自己抓取每次点击、按键等。讨厌的东西。

$("#product1").addClass("active");
$("#menu2").hide();