Question

<script type="text/javascript">
    $('#nav ul li').eq(0).addClass("active");
    });
</script>

#nav a:after {
    -webkit-transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    position: absolute;
    z-index: 1;
    content: "";
    left: 50%;
    right: 50%;
    height: 3px;
    bottom: 13px;
    background-color: #24252f;
}

   <div id="nav">
    <ul >
        <li ><a href="/index.html">HOME</a></li>
        <li><a href="/products/index.html">PRODUCTS</a></li>
        <li><a href="/about/index.html">ABOUT</a></li>        
        <li class="reservation"><a href="/partnerships/index.html">PARTNERSHIPS</a></li>                 
    </ul>
</div>

*这是我的代码，这里我有导航栏，当用户进入特定页面时我必须激活li。我的问题是我分隔了标题（导航栏）所以如何添加或删除活动类到li *

Answer 1

试试这个：它会添加“活跃的”＃39;被点击的元素的类。您可以在活动类中提供所需的任何样式。您可以检查DOM是否清晰

HTML：

    <div id="nav">
      <ul >
        <li><a href="#">HOME</a></li>
        <li><a href="#">PRODUCTS</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">PARTNERSHIPS</a></li>           
     </ul>
</div>

脚本：

$('#nav').on('click','ul > li',function(){
$('li').removeClass('active');
$(this).closest('li').addClass('active');
})

CSS

.active {
// Add styles
}

Codepen

Answer 2

你最好在li标签中添加一个名为active的类，并将一些css写入 .active 类，并将其用于分别为页面所需的li。

Answer 3

考虑到您将在index.html中为每个菜单添加nav div，并且index.html对于每个菜单都是单独的，您可以执行以下操作：

1）给你的每个人提供ids

    <li id="li1"><a href="/index.html">HOME</a></li>
    <li id="li2"><a href="/products/index.html">PRODUCTS</a></li>
    <li id="li3"><a href="/about/index.html">ABOUT</a></li>

2）并在每个index.html上添加以下脚本

 <script type="text/javascript">
   $('respective li id').addClass("active"); 

   //for other lis remove active class using
   //following code :  $('li id').removeClass("active");
</script>

Answer 4

您可以尝试将.active放在该特定页面中，就像您在主页中一样：

<li><a href="/index.html" class="active">HOME</a></li>
<li><a href="/products/index.html">PRODUCTS</a></li>
<li><a href="/about/index.html">ABOUT</a></li>
<li class="reservation"><a href="/partnerships/index.html">PARTNERSHIPS</a></li>

然后，如果你在产品中：

<li><a href="/index.html">HOME</a></li>
<li><a href="/products/index.html"  class="active">PRODUCTS</a></li>
<li><a href="/about/index.html">ABOUT</a></li>
<li class="reservation"><a href="/partnerships/index.html">PARTNERSHIPS</a></li>

将类添加到navbar li标记

4 个答案: