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。

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

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

3 个答案:

Fiddle

CSS：