Question

我在顶部有四个菜单，例如Home, Projects, About Us and Contact Us，如果我选择任何菜单，则需要隐藏其余菜单。在这种情况下，我用颜色管理。当菜单激活时，它应该是黑色的，其余的是白色的，通过更新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")

});

小提琴：http://jsfiddle.net/xw1hkLjm/

Answer 2

$("li").find(".selectedtab").removeClass("selectedtab");
$(this).addClass("selectedtab");

Answer 3

$('li').click(function() {
    $(this).addClass('selectedtab');
    $('li').not(this).removeClass('selectedtab');
});

Answer 4

试试这个：为id分配一些header，以区分其他ul，如果它们在页面上

 $("#header li").click(function(){
         $(this).attr("class", "selectedtab");
         $("#header li").not(this).removeAttr("class");

         });

示例html：

<ul id="header">
<li name="Home">Home</li>
<li name="Contact">Contact</li>
<li name="AboutUs">AboutUs</li>
<li name="Projects">Projects</li>

</ul>

<ul>

<li class="new">hiiiii</li>

</ul>

Jquery：基于所选菜单的选项卡式菜单导航，激活和取消激活

4 个答案: