javascript - 使用 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 demo