Question

我在突出显示我的活动菜单项时遇到了麻烦。我正在使用CSS进行悬停，但我从其他帖子中了解到：a：active不能与CSS一起使用吗？

这就是我迄今为止所做的：

HTML

 <section id="nav">    
        <li><a class="nav" href="editorial.html">EDITORIAL</a></li>
        <li><a class="nav" href="places.html">PLACES</a></li>
        <li><a class="nav" href="people.html">PEOPLE</a></li>
        <li><a class="nav" href="architecture.html">ARCHITECTURE</a></li>
        <li><a class="nav" href="projects.html">PROJECTS</a></li>
        <li><a class="nav" href="published.html">PUBLISHED</a></li>
</section>

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

JQUERY

  <script>
 $(document).ready(function() { 
  $("#nav li .nav").click(function ( e ) {
e.preventDefault();
$("#nav li a.active").removeClass("active"); //Remove any "active" class  
$(this).addClass("active"); //Add "active" class to selected tab  

// $(activeTab).show(); //Fade in the active content  
});
});

提前致谢！

Answer 1

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

我更新了代码，只在父容器上使用了一个click事件，并在函数中减少了DOM遍历。但是，您还需要更新CSS。由于特异性，您没有获得背景颜色。您使用#nav ID指定了背景颜色和悬停。所以你需要以这种方式指定.active类。

#nav .active { 
    /* css here */
}

Answer 2

试试这个：

$(document).ready(function() { 
    $("#nav li .nav").click(function ( e ) {
        e.preventDefault();
        $("#nav li a.active").removeClass("active"); //Remove any "active" class  
        $(this).addClass("active"); //Add "active" class to selected tab  
        $(activeTab).show(); //Fade in the active content  
    });
});

你错过了一些#，也没有必要使用$("a", this) $(this)来完成这项工作！

Answer 3

我遇到了这个问题。我解决这个问题。

<script>
  $(window).load(function(){
      var url = window.location.href;
      $('nav li').find('.active').removeClass('active');
      $('nav li a').filter(function(){
          return this.href == url;
      }).parent().addClass('active');
  });
</script>

您可以将jsfiddle演示版保存到本地，然后进行测试。

Answer 4

我通过简单地遍历我的菜单网址并将它们与活动页面Url匹配然后将活动的css类添加到找到的结果来解决了这个问题。这对我有用：

       //Get the current page link
       current_page_link = document.location.href;

       //Search your menu for a linkURL that is similar to the active pageURL
       $(".navbar-nav a").each(function(){
           var link_loop = $(this).attr("href");
           if(link_loop === current_page_link){
               var found_url = $(this).attr("href");
               $('.navbar-nav a[href="'+found_url+'"]').addClass('active');
           }
       });

使用jquery突出显示活动菜单项

4 个答案: