Question

我有这个脚本在点击时突出显示导航菜单但在点击后所选的类消失了。这里是否有解决方法使所选类在单击后生效？

<script type="text/javascript">
$( document ).ready( function() {
    $( '#nav ul li a' ).click( function() {
        $( '#nav ul li' ).removeClass( 'selected' );
        $( this ).parent( 'li' ).addClass( 'selected' );
        alert('hello');
    });
});

</script>
    <div id="nav"> 
        <ul>    
            <li><a href="/">Home</a></li>
            <li><a href="/blog/">Blog</a></li>
            <li><a href="/about/">About</a></li>
        </ul>
    </div>

Answer 1

您可以使用.siblings方法获取具有li类的selected元素。

$( document ).ready( function() {
    $( "#nav ul li a" ).click( function() {
        $( this ).parent( "li" )
            .addClass( "selected" )
            .siblings( ".selected" )
                .removeClass( "selected" );
        return false;
    });
});

您可以在jsFiddle上看到这一点。

Answer 2

如果我理解正确的话......示例：http://jsfiddle.net/jgmgW/

$( document ).ready( function() {
   $( '#nav ul li' ).click( function() {
       $( '#nav ul' ).children('li').removeClass();
      $( this ).addClass( 'selected' );
   });
});

#nav .selected a{background:red;display:block}

<div id="nav">
    <ul>    
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>

jquery高亮菜单

2 个答案: