使用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;
}

请帮我解决这个问题。我遇到了困难。

- user3615856

---

:active 起作用了，但不是你想的那样。当你按住鼠标或手指在元素上时，该元素就会变为 active 状态。一旦你停止操作，它就不再是 active 状态了。 - Banana

@Banana，上述情况是否可能？我有点困惑。 - user3615856

如果您使用 JavaScript，一切皆有可能。我只是无法理解您的代码与您想要实现的目标有什么关系...只是为了明确，您只想突出显示2个菜单项（点击的一个 + 下一个）对吗？ - Banana

@Banana 不想突出显示下一个菜单 - user3615856

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演示

- Artur Filipiak

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>

如果您对这个例子有任何问题，请随时提问。

- Banana