javascript - Jquery:选项卡式菜单导航，根据所选菜单激活和停用

Question

我的顶部有四个菜单，例如主页、项目、关于我们和联系我们，如果我选择任何一个菜单，那么其余的菜单需要隐藏。对于这种情况，我用颜色来管理。当菜单激活时，它应该是黑色的，其余的通过更新 css 是白色的。它(下面的代码)工作正常。但是，我想简化这段代码，因为我认为该操作的代码量似乎很大。我如何简化这段代码以执行相同的操作？有什么帮助吗？

$("li[name='AboutUs']").click(function(){
$(this).attr("class", "selectedtab");
$("li[name='Contact']").removeAttr( "class", "selectedtab");
$("li[name='Projects']").removeAttr( "class", "selectedtab");
$("li[name='Home']").removeAttr( "class", "selectedtab");
});
$("li[name='Projects']").click(function(){
$(this).attr("class", "selectedtab");
$("li[name='Contact']").removeAttr( "class", "selectedtab");
$("li[name='AboutUs']").removeAttr( "class", "selectedtab");
$("li[name='Home']").removeAttr( "class", "selectedtab");
});
$("li[name='Home']").click(function(){
$(this).attr("class", "selectedtab");
$("li[name='Contact']").removeAttr( "class", "selectedtab");
$("li[name='AboutUs']").removeAttr( "class", "selectedtab");
$("li[name='Projects']").removeAttr( "class", "selectedtab");
});
$("li[name='Contact']").click(function(){
$(this).attr("class", "selectedtab");
$("li[name='Home']").removeAttr( "class", "selectedtab");
$("li[name='AboutUs']").removeAttr( "class", "selectedtab");
$("li[name='Projects']").removeAttr( "class", "selectedtab");
});

Answer 1

使用名称属性选择器会使结构过于复杂。只需为所有这些创建 Id，然后使用 jQuery siblings()方法。

HTML:

<ul id="menu">

    <li>About Us</li> 
    <li>Contact</li>   
    <li>Projects</li>   
    <li>Home</li>   

</ul>

JavaScript:

$("#menu li").click(function(){

    $(this).removeClass("hide").addClass("selectedtab");
    $(this).siblings().removeClass("selectedtab").addClass("hide")

});

fiddle :http://jsfiddle.net/xw1hkLjm/