在已经有类的链接上保持活动状态

时间:2015-09-02 02:58:35

标签: jquery css

我希望悬停下划线在特定链接上保持可见状态。我知道你可以这样做。但我已将nombore类添加到a href

$(function () {
$(".numbers li a").click(function (e) {
    e.preventDefault();
    $(" .numbers li a").parent().addClass("active").not($(this).parent()).removeClass("active");
});
});         

http://jsfiddle.net/ydxqt7jp/

2 个答案:

答案 0 :(得分:1)

你的小提琴没有任何活跃的课程,或JS。

请看下面的工作版



cgo

$(function () {
    $(".numbers li a").click(function (e) {
        e.preventDefault();
        $(".numbers li a").removeClass('active');
        $(this).addClass("active");
    });
});

 .numbers {
     z-index: 999;
     font-size: 16px;
     font-family:'Theinhardt-Rg';
     margin-top: 50px;
     list-style-type: none;
     position: fixed;
     left: 20px;
 }
 .numbers li > a {
     color: #696969;
     text-decoration:none;
     margin-bottom:30px;
 }
 .numbers li > a:hover {
     color: #030303;
     text-decoration:none;
 }
 .slider {
     position: absolute;
     display: block;
     left: 0;
     top: 90%;
     margin: 0 auto;
     height: 3px;
     background-color: #030303;
     width: 0%;
     transition: width 0.5s ease;
 }
 .nombore {
     position: relative;
     display: inline-block;
     transition: all 0.1s ease-out;
 }
 .nombore:hover .slider {
     width: 100%;
 }
 .nombore.active {
     color: #030303;
     text-decoration: none;
 }
 .nombore.active .slider {
     width:100%;
 }




答案 1 :(得分:0)

将此添加到您的脑袋:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

这符合你的风格:

.active a .slider {
     width: 100%;
 }