user2286339 user2286339 - 1 month ago 14
HTML Question

<a> style - fade link color on click

There are several links inside of a ul with a nicely looking css color transition on mouseover (a:hover).


  1. How can I have an anchor to fade its color back to #374659 when the user clicks another link?

  2. Additionally, the jQuery below should make one link (class "current-link") colored red, but for some reason, it gets stuck after one click to Link 1/2/3.



That is what I have now:



$(document).ready(function() {
/* Highlight "Link 1"*/
$(".item1").click(function() {
$(".item1").replaceWith('<a class="item1 current-link" href="#" >Link 1</a>');
$(".item2").replaceWith('<a class="item2" href="#">Link 2</a>');
$(".item3").replaceWith('<a class="item3" href="#">Link 3</a>');
$(".item4").replaceWith('<a class="item4" href="#">Link 4</a>');
});

/* Highlight "Link 2"*/
$(".item2").click(function() {
$(".item1").replaceWith('<a class="item1" href="#">Link 1</a>');
$(".item2").replaceWith('<a class="item2 current-link" href="#">Link 2</a>');
$(".item3").replaceWith('<a class="item3" href="#">Link 3</a>');
$(".item4").replaceWith('<a class="item4" href="#">Link 4</a>');
});

/* Highlight "Link 3"*/
$(".item3").click(function() {
$(".item1").replaceWith('<a class="item1" href="#">Link 1</a>');
$(".item2").replaceWith('<a class="item2" href="#">Link 2</a>');
$(".item3").replaceWith('<a class="item3 current-link" href="#">Link 3</a>');
$(".item4").replaceWith('<a class="item4" href="#">Link 4</a>');
});

/* Highlight "Link 4"*/
$(".item4").click(function() {
$(".item1").replaceWith('<a class="item1" href="#">Link 1</a>');
$(".item2").replaceWith('<a class="item2" href="#">Link 2</a>');
$(".item3").replaceWith('<a class="item3" href="#">Link 3</a>');
$(".item4").replaceWith('<a class="item4 current-link" href="#">Link 4</a>');
});
});

#navbar-top {
position: absolute;
top: 50px;
left: 50px;
width: 400px;
height: 50px;
}
#navbar-top ul li {
/*float:left; */
display: inline-block;
font: bold 12px/12px sans-serif;
}
#navbar-top ul > li + li {
border-left: solid 1px #374659;
}
#navbar-top a {
/*display: block;*/
padding: 2px 7px;
border: 0px;
margin: 0px;
text-decoration: none;
font-size: 14px;
transition: 400ms ease;
}
/*
Necessary link style order:
1. a:link
2. a:visited
3. a:hover
4. a:active
*/

#navbar-top a:link {
color: #374659;
/*light grey*/
}
#navbar-top a:visited {
color: #374659;
/*light grey*/
}
#navbar-top a:hover {
color: red;
/*Slowly fade from grey to red*/
}
#navbar-top a:active {
color: red;
}
#navbar-top a.current-link
/*Make it more specific than other selectors*/

{
font-weight: bold;
color: red;
}

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

<div id="navbar-top">
<ul>
<li><a href="#" class="item1 current-link">Link 1</a>
</li>
<li><a href="#" class="item2">Link 2</a>
</li>
<li><a href="#" class="item3">Link 3</a>
</li>
<li><a href="#" class="item4">Link 4</a>
</li>
</ul>
</div>





Thanks for looking!

Answer

With jQuery, you can check with click to set current-link class to different links when clicked.

$(document).ready(function(){
    $('#navbar-top ul li a').on('click',function(){ 
    $('ul li a').removeClass('current-link');
    $(this).addClass('current-link');
  })
})

Check out this fiddle:

https://jsfiddle.net/du6Lu4ge/5/

Hope it solves your concern.