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

Jquery: tabbed menu navigation, activation and deactivation based on the menu selected

本文关键字：菜单 激活 选项 Jquery 导航      更新时间：2023-09-26

我在顶部有四个菜单，例如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");
});

通过使用名称属性选择器使结构过于复杂。只需为所有这些创建 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/

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

试试这个：给你的header分配一些id来区分其他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>

$('li').click(function() {
    $(this).addClass('selectedtab');
    $('li').not(this).removeClass('selectedtab');
});
相关文章：