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

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>

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

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

2 个答案: