jquery：基於菜單選擇的標籤式菜單導航，激活和停用

我有頂部的四個菜單，如Home, Projects, About Us and Contact Us，如果我選擇任何菜單，然後，其餘菜單需要隱藏。對於這種情況，我使用顏色進行管理。當菜單激活時，它應該是黑色的，其餘的都是白色的，通過更新css。它（這下面的代碼）工作正常。但是，我想簡化這個代碼，因爲我認爲這看起來代碼量很大。我如何簡化這些代碼來執行相同的操作？任何幫助？jquery：基於菜單選擇的標籤式菜單導航，激活和停用

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

來源

2014-12-04 Sakthivel

試試這個：分配一些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>

來源

2014-12-04 13:45:10

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

來源

2014-12-04 13:42:59 kapantzak

這是有問題的，如果有其他的'你不想影響在頁面上li'元素。 – Halcyon 2014-12-04 13:43:55

然後他可以通過他們的父類或id來定位特定的li：$（'ul.your-list> li'） – kapantzak 2014-12-04 13:45:26

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

來源

2014-12-04 13:44:29 Madhav

通過使用名稱屬性選擇器，您已經過分複雜化了您的結構。只需爲所有人創建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") 

});

小提琴：

來源

2014-12-04 13:55:38 mgibala

回答

相關問題