使用jquery突出显示下一个菜单项

Question

嗨，我正在尝试在我的网站中实现一个功能，当我点击一个菜单项时，突出显示应该能够流到下一个菜单项。从下面的例子，如果我点击people ，菜单应该突出显示people ，然后突出显示菜单中的下一个案例是tourist ..我正在使用CSS进行悬停，但我从其他帖子中了解到：a：active不能与CSS一起使用？

这就是我到目前为止所做的事情：

HTML

<section id="nav">    
    <li><a class="nav" href="People.html">People</a></li>
    <li><a class="nav" href="Tourist.html">Tourist</a></li>
    <li><a class="nav" href="Joints.html">Joints</a></li>
    <li><a class="nav" href="Project.html">Project</a></li>
    <li><a class="nav" href="Products.html">Products</a></li>
    <li><a class="nav" href="cafes.html">cafes</a></li>
</section>

jQuery的

<script>
    $(function() { 
        $('#nav').on('click','.nav', function ( e ) {
            e.preventDefault();
            $(this).parents('#nav').find('.active').removeClass('active').end().end().addClass('active');
            $(activeTab).show();
        });
    });
</script>

CSS

#nav{
    width:100%;
    text-align:center;
    min-width:1300px;
    height:80px;
    position:absolute;
    top:0;
    left:0;
    background:#fff;
    list-style:none;
    border-bottom: 1px solid #000;
}

#nav li{
    display:inline;
}

#nav .nav{
    display:inline-block;
    background-color:#000;
    color:#FFF;
    font-family: 'Oswald', sans-serif;
    letter-spacing:1px;
    font-size:16pt;
    line-height:18pt;
    font-weight:400;
    text-decoration:none;
    margin-right: 3px;
    margin-left: 3px;
    margin-top:35px;
    padding:0px 3px 2px 3px;
}

#nav .nav:hover{
    background:#FFFF00;
    color:#000;
}

.active{
    background:#FFFF00;
    color:#000;
}

请帮帮我。我对此感到困惑

Answer 1

这应该为你做的伎俩（如果我理解正确的话）：

$('#nav').on('click','.nav', function ( e ) {
    e.preventDefault();
    // remove all "active" classes:
    $('.active').removeClass('active');
    // find the next menu item and append "active" class:
    $(this).parent().next('li').find('.nav').addClass('active');
    $(activeTab).show();
});

将!important添加到.active样式（您需要覆盖父依赖样式，如下所示： #nav .nav ）：

.active{
    background:#FFFF00 !important;
    color:#000 !important;
}

JSFiddle演示

Answer 2

如果你想突出显示菜单中的下一个项目，你只需要检索菜单项的索引（在你的情况下<li>索引），并计算下一个：

更新：

将动画添加到代码段

 $(function () { $('#nav').on('click', '.nav', function (e) { e.preventDefault(); var NextMenuID = ($(this).parent().index()+1)%$(this).parent().parent().children().length; var NextItem =$('#nav .nav').eq(NextMenuID); $('#nav .nav').removeClass("active"); var x1=$(this).offset().left; var y1=$(this).offset().top; var width1=$(this).width(); var height1=$(this).height(); var x2=NextItem.offset().left; var y2=NextItem.offset().top; var width2=NextItem.width(); var height2=NextItem.height(); var slidingDiv=$("<div/>"); slidingDiv.css({ "width":width1, "height":height1, "left":x1, "top":y1, "display":"block", "position":"absolute", "background":"#FFFF00", "padding":"0px 3px 2px 3px" }).appendTo($("body")).animate({ "width":width2, "height":height2, "left":x2, "top":y2, },function(){ NextItem.addClass("active"); slidingDiv.remove(); }); //$(activeTab).show(); }); }); 

 #nav { width:100%; text-align:center; height:80px; position:absolute; top:0; left:0; background:#fff; list-style:none; border-bottom: 1px solid #000; } #nav li { display:inline; } #nav .nav { display:inline-block; background-color:#000; color:#FFF; font-family:'Oswald', sans-serif; letter-spacing:1px; font-size:16pt; line-height:18pt; font-weight:400; text-decoration:none; margin-right: 3px; margin-left: 3px; margin-top:35px; padding:0px 3px 2px 3px; } #nav .nav:hover { background:#FFFF00; color:#000; } .active { background:#FFFF00 !important; color:#000 !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section id="nav"> <li><a class="nav" href="People.html">People</a> </li> <li><a class="nav active" href="Tourist.html">Tourist</a> </li> <li><a class="nav" href="Joints.html">Joints</a> </li> <li><a class="nav" href="Project.html">Project</a> </li> <li><a class="nav" href="Products.html">Products</a> </li> <li><a class="nav" href="cafes.html">cafes</a> </li> </section> 

如果您对该示例有任何疑问，请随时提出。