Question

我是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>

这是jquery代码：

$(".navtab li.about").click(function(){
    $('.navtab li.home').removeClass('selected');
    $('.navtab li.about').addClass('selected');
});

这是我的css：

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

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

提前致谢。法比奥

Answer 1

使用removeClass('home.selected')代替removeClass('selected'); $('.navtab li.home') $('.navtab li.home.selected')

<强> Live Demo

$("nav li.about").click(function(){  
     $('nav li.home.selected').removeClass('home selected');     
     $('nav li.about').addClass('selected');
});

Answer 2

如果您在客户端加载页面，请改为：

$(function(){

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

});

单击任何列表项时都可以使用。

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

Answer 3

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

如果您在单击链接时遇到类客户端，则会重新加载页面，然后jQuery回调将无效。

Answer 4

您可以使用'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：

$("[name='nav_item']").click(function(){
$("[name='nav_item']").removeClass('selected');
$(this).addClass('selected');
});

单击导航项时，jQuery会删除“selected”类的所有实例，然后将“selected”类添加到单击的链接中。如果这对你有用，请告诉我......我已经制作了一个jsFiddle here。

如果您愿意，可以将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在菜单上添加和删除类

4 个答案: