点击和活跃

我有我的网站与正常分页链接，主页，关于我们，一个简单的菜单时突出显示菜单项...点击和活跃

我一直试图找到一种方法来突出菜单项被点击，但所有的解决方案都不能正常工作，但它正在对解决方案小提琴，所以它可能是从我身边一个错误，因为我很少的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 
    }); 
});

我想象它是一个简单的事情，但我坚持......

来源

2014-11-02 Sherbieny

在你的CSS你已经确定了 “一个圈”，如果不是这种 “.circle一个”？ – Kolban 2014-11-02 19:46:22

尝试是这样的

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

来源

2014-11-02 19:46:24 Gumbo

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

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

既然你只分配边框颜色和无边框样式（即实线，虚线，等等），你无法看到的边界。

来源

2014-11-02 19:54:14 ankur

在您的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; 
}

来源

2014-11-02 19:56:55

回答

上Fiddle

CSS演示：

相关问题