单击并处于活动状态时突出显示菜单项

Question

我的网站有一个简单的菜单，带有普通的分页链接，首页，关于我们...

我一直试图找到一种方法来突出显示所单击的菜单项，但是尽管所有解决方案都无法解决，尽管它正在解决解决方案上的麻烦，所以这可能是我的错误，因为我对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");
})

Answer 2

您不需要任何JavaScript代码。 将此添加到您的CSS：

#nav a:active, #nav a.active {
       border: 1px solid #000;
       background-color: yellow;
   }

由于您仅分配边框颜色而没有分配边框样式（即，实线，虚线等），因此您无法看到边框。

Answer 3

在您的CSS中，将:active替换为:focus 。

小提琴演示

CSS：

.circle a {
    font-family:'Roboto Condensed', sans-serif;
    display: block;
    color:#000000;
    text-align:center;
    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:focus, #nav a.active {
    border-color:#00ff00;
}