1

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

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

提前致谢。法比奥

4

4 回答 4

3

使用removeClass('home.selected')而不是removeClass('selected');也$('.navtab li.home')将是$('.navtab li.home.selected')

现场演示

$("nav li.about").click(function(){  
     $('nav li.home.selected').removeClass('home selected');     
     $('nav li.about').addClass('selected');
});
于 2012-09-26T17:02:43.807 回答
1

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

$(function(){

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

});

这在单击任何列表项时有效。

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

于 2012-09-26T17:09:35.067 回答
0

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

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

于 2012-09-26T17:06:10.620 回答
0

您可以使用 'data-type=""' 属性或仅使用名称属性来管理此菜单的开启状态：

<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 会删除“选定”类的所有实例，然后将“选定”类添加到单击的链接中。让我知道这是否对你有用...我在这里做了一个 jsFiddle 。

然后，您可以根据需要将这些 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;?>>
于 2012-09-26T17:28:11.160 回答