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

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

我使用以下代码.迟到的答案,但我希望这会对某人有所帮助.

// This will work for both relative and absolute hrefs
function active_menu() {   
    var url = window.location.href;
    $('.nav a').filter(function() {
        return this.href == url;
    }).addClass('selected');
}

Answer 2

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

我更新了代码，仅在父容器上使用一次单击事件，并在函数中减少了 DOM 遍历。但是，您还需要更新 CSS。由于特殊性，您没有获得背景颜色。您使用 id 指定了背景颜色和悬停#nav。因此，您也需要以这种方式指定 .active 类。

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