javascript - 单击并激活时突出显示菜单项

Question

我的站点有一个简单的菜单，其中包含正常的分页链接、主页、关于我们...

我一直在尝试找到一种方法来突出显示被单击的菜单项，但是所有解决方案都不起作用，尽管它正在处理解决方案 fiddle ，所以这可能是我这边的一个错误，因为我的 javascript 很少知识 所以..

菜单是:

<div class="circle">
   <ul id="nav" class="cirular-list" >
      <li><a href="#Home">Home</a></li>
      <li><a href="#AboutUs">About Us</a></li>                                                      
      <li><a href="#OurWork">Our Work</a></li>
      <li><a href="#ContactUs">Contact Us</a></li>                            
      <li><a href="#Services">Services</a></li>
   </ul>
</div>

CSS:

circle a {
    font-family:'Roboto Condensed', sans-serif;
    font-weight: 100;    
    display: block;    
    width: 20%;
    height: 20%;     
    color:#000000;
    text-align:center;
    line-height:400%;
    margin-left: -11%;
    margin-top: -9%;
    position: absolute;
    text-align: center;
    border:1px solid #ffffff;
    border-radius: 50%;   
    -webkit-transition: border-color 1s ease;
    -moz-transition: border-color 1s ease;
    -o-transition: border-color 1s ease;
    -ms-transition: border-color 1s ease;
    transition: border-color 1s ease;         

}

.circle a:hover {

  color:#000000;

   border-color: #000000;

}

#nav a:active, #nav a.active {

    border-color:#000000 !important;
}

我尝试了很多 jQuery 解决方案 例如:

document.querySelector('.menu-button').onclick = function (e) {
    e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}

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

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

我想象这是一件简单的事情，但我被困住了......

Answer 1

尝试这样的事情

$(".menu-button").on("click", function(){
    $("#nav li a.active").removeClass("active");
    $(this).addClass("active");
})