jquery - 在已经具有类的链接上保持事件状态

Question

我希望悬停下划线在您访问特定链接时保持可见。我知道你可以做到这一点。但我已经将 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/

Answer 1

您的 fiddle 没有任何事件类或 JS。

看看下面的工作版本

$(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%;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="numbers">
    <li><a href="#/" class="nombore"><span>:/</span>        <span class="slider">
        </span></a>

    </li>
    <li><a href="#modal1" class="nombore"><span>01</span> <span class="slider">
        </span></a>

    </li>
    <li><a href="#modal2" class="nombore"><span>02</span> <span class="slider">
        </span></a>

    </li>
    <li><a href="#modal3" class="nombore"><span>03</span> <span class="slider">
        </span></a>

    </li>
    <li><a href="#modal4" class="nombore"><span>04</span> <span class="slider">
        </span></a>

    </li>
    <li><a href="#modal5" class="nombore"><span>05</span> <span class="slider">
        </span></a>

    </li>
    <li><a href="#modal6" class="nombore"><span>06</span> <span class="slider">
        </span></a>

    </li>
    <li><a href="#modal7" class="nombore"><span>07</span> <span class="slider">
        </span></a>

    </li>
    <li><a href="#modal0" class="nombore"><span>/p</span> <span class="slider">
        </span></a>

    </li>
</ul>