CODEWITHSUNDEEP
jquerycss
user2252219
user2252219

Reputation: 865

Keep active state on links that already have class

I want that hover underline to stay visible when your on the specific link. I understand you could do this. But I've already added the nombore class to the 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/

Upvotes: 0

Views: 39

Answers (2)

Dario
Dario

Reputation: 280

add this to your head:

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

and this to your style:

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

Upvotes: 0

Pindo
Pindo

Reputation: 1625

Your fiddle didn't have any active class, or the JS.

Have a look below for a working version

$(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>

Upvotes: 1

Related Questions