單擊並處於活動狀態時突出顯示菜單項

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