单击并处于活动状态时高亮显示菜单项

Highlighting Menu Item when clicked and active

本文关键字：高亮 显示 菜单项 活动状态 单击      更新时间：2023-09-26

我的网站有一个简单的菜单，包含正常的页面链接、主页、关于我们，。。。

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

我想这是一件简单的事情，但我被卡住了。。。

在CSS中将:active替换为:focus。

Fiddle演示

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

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

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

由于只指定边框颜色，没有边框样式（即实心、虚线等），因此无法看到边框。

试试这样的

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