jQuery隐藏/显示2菜单

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

Product1 |产品2

主页选项1选项2选项3 | Option1 Option2 Option3

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

我的HTML是这样的不便（简化当然）：

<div class="products"> 
<a href="#" id="product1">Product1</a> 
<a href="#" id="product2">Product2</a> 
</div> 
<ul id="menu1"> 
<li>Option1</li> 
<li>Option2</li> 
<li>Option3</li> 
</ul> 
<ul id="menu2"> 
<li>Option1</li> 
<li>Option2</li> 
<li>Option3</li> 
</ul>

和jQuery去水木清华这样的：

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

问题：当我第一次加载网页一切正常。当我在＃产品2单击例如，它是在函数中指定的一切：

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

，但它也执行了前两行：

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

而且我同时获得＃产品1和＃产品2处于活动状态并且两个菜单都隐藏有任何想法吗？在此先感谢！

来源

2013-08-01 user2642287

看起来你的工作为例精... http://jsfiddle.net/d7DrG/ – Okazari

它上的jsfiddle，但它在我的web项目不一样。可能我应该提到它在ASP.NET Web Forms项目中。这种行为对我来说也很奇怪，但是我找不到它背后的原因。 – user2642287

你可以尝试debbuging与一些中断点，一步一步看你的代码在点击后去哪里？这段代码非常简单，错误仍然很奇怪。 – Okazari

您应该通过返回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; 
    }); 
});

来源

2013-08-01 14:15:26

导航到'＃'时不会重新载入页面。 –

它不应该重新载入，但是如果返回false，则一切正常。谢谢！ – user2642287

简短的回答：您需要添加return false到您的功能。

额外的信息：

在脚本的开始，你有以下：

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

我会倾向于分配在HTML或CSS某处这些特性，使product1有active类等

最后，你有没有考虑过只是使用jQuery Accordion或Tabstrip组件？

http://jqueryui.com/accordion/

来源

2013-08-01 14:18:48

谢谢！返回假是我正在寻找。 – user2642287

聪明人的话：WebForms不像这样适应客户端脚本。它试图通过ViewState抓取每个点击，按键等。讨厌的东西。 –

jQuery隐藏/显示2菜单

回答

相关问题