Jquery在菜单上添加和删除类

我是jquery的新手，我有以下html代码菜单：

<nav>
    <ul class="navtab">
        <li class='home selected'><a href='index.php'>Home</a></li>
        <li class='about'><a href='company.php'>About</a></li>
    </ul>
</nav>

这是我的css：

nav ul.navtab li.selected a{
    color: #fff;
    background-color: #575757;
}

选择“页面加载”选项卡“主页”时。当我单击“关于”选项卡时，我想删除“主页”选项卡上选定的类，并添加“关于”选项卡上选定的类。问题出在哪里

提前谢谢。Fabio

使用removeClass'home.selected'而不是removeClass'selected'；另外$'.navtab li.home'将是$'.navtab li.home.selected'

使用removeClass'home.selected'代替removeClass'selected'；另外$'.navtab li.home'将是$'.navtab li.home.selected'

---

如果要突出显示所选部分，必须在服务器端执行

---

如果您在单击链接时弄乱了客户端的类，页面将被重新加载，jQuery回调将不起作用。

如果您想突出显示所选的部分，您必须在服务器端这样做

---

如果在单击链接时弄乱了客户端的类，则页面将被重新加载，jQuery回调将不起作用。

如果在客户端加载页面，请执行以下操作：

$(function(){

    $(".navtab>li").click(function(){
        $(this).addClass('selected').siblings().removeClass('selected');
    });

});

当单击任何列表项时，此操作都有效

---

如果要在服务器端加载新页面，则需要设置所选的类服务器端。

如果要在客户端加载页面，请执行以下操作：

$(function(){

    $(".navtab>li").click(function(){
        $(this).addClass('selected').siblings().removeClass('selected');
    });

});

当单击任何列表项时，此操作都有效

---

如果要在服务器端加载新页面，则需要设置所选的类服务器端。

您可以使用“数据类型=”属性或仅使用名称属性来管理此菜单的打开状态：

<nav>
<ul class="navtab">
<li class='home selected' id="homepage" name="nav_item"><a href='#'>Home</a></li>
<li class='about' id="company" name="nav_item"><a href='#'>About</a></li>
</ul>
</nav>​

当单击导航项目时，jQuery将删除“selected”类的所有实例，然后将“selected”类添加到单击的链接中。让我知道这是否对你有用…我已经做了一个尝试

如果您愿意，您可以将ID用于其他用途。这似乎是一种更有效/更清洁的方法

只要您不刷新页面，这将起作用……否则，请使用后端代码PHP、JSP等来管理打开状态

PHP示例：

<?php
if (isset($_GET['page']) && $_GET['page'] == 'homepage'){
    $selected_link = 'class="selected"'; //set the class if page is homepage
} else $selected_link = ''; //empty, will not throw and error
?>

然后你的链接：

<li class='home' id="homepage" <?php echo $selected_link;?>>

---

您可以使用“data type=”属性或仅使用name属性来管理此菜单的打开状态：

<nav>
<ul class="navtab">
<li class='home selected' id="homepage" name="nav_item"><a href='#'>Home</a></li>
<li class='about' id="company" name="nav_item"><a href='#'>About</a></li>
</ul>
</nav>​

当单击导航项目时，jQuery将删除“selected”类的所有实例，然后将“selected”类添加到单击的链接中。让我知道这是否对你有用…我已经做了一个尝试

如果您愿意，您可以将ID用于其他用途。这似乎是一种更有效/更清洁的方法

只要您不刷新页面，这将起作用……否则，请使用后端代码PHP、JSP等来管理打开状态

PHP示例：

<?php
if (isset($_GET['page']) && $_GET['page'] == 'homepage'){
    $selected_link = 'class="selected"'; //set the class if page is homepage
} else $selected_link = ''; //empty, will not throw and error
?>

然后你的链接：

<li class='home' id="homepage" <?php echo $selected_link;?>>

---

---

您的代码运行良好您的问题是什么？您是否将jQuery封装在$function{…}中？单击“关于”选项卡加载页面company.php，主页选项卡仍选择了类，而“关于”选项卡未选择类。您的代码运行良好您的问题是什么？您是否将jQuery封装在$function{…}中？单击“关于”选项卡加载页面company.php，“主页”选项卡仍选择了类，“关于”选项卡未选择类。感谢您的回复，但此解决方案不起作用，或者我不明白+谢谢你启发我。兄弟姐妹们，有用的。PS fabio，是的，它很有效，是一个更好的解决方案，因为你可以使用if来处理尽可能多的选项卡，并且只需一行。谢谢你的回复，但是这个解决方案不起作用，或者我不明白+谢谢你启发我。兄弟姐妹们，有用的。PS fabio，是的，它很有效，是一个更好的解决方案，因为你可以在一行中为尽可能多的选项卡使用if。我调整了我的答案，还添加了一个实时演示链接。应用类的顺序会有所不同。。看起来home没有默认类。。因此，当选定的类被删除时，它仍然保留选择器颜色。。但是如果我们有一个默认的home类，那么$'nav li.home'.removeClass'selected'wii work！！我更新了我的答案，fiddle速度很慢，在那里工作很困难。我调整了我的答案，还添加了一个实时演示链接。应用类的顺序会有所不同。。看起来home没有默认类。。因此，当选定的类被删除时，它仍然保留选择器颜色。。但是如果我们有一个默认的home类，那么$'nav li.home'.removeClass'selected'wii work！！我更新了我的答案，fiddle速度很慢，在那里工作很困难。当我点击about选项卡时，页面会刷新，所以我只能使用您在上一条消息中建议的php代码来解决问题。我想用jquery来解决。。。。谢谢你@Fabio-如果这是您选择的答案，请投赞成票，或者在我单击“关于”选项卡时单击“接受答案”，页面会刷新，因此我只能使用您在上一条消息中建议的php代码来解决问题。我想用jquery来解决。。。。谢谢你@法比奥-如果这是 您选择的答案请投赞成票或点击“接受答案”