Question

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

How can I have an anchor to fade its color back to #374659 when the user clicks another link?
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 1

$(document).ready(function() {
	$("a").on("click", function() {
    $("a").removeClass("current-link");
    $(this).addClass("current-link");
  });
});

#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>

首先，选择所有链接，然后从中删除类current-link 其次，您使用current-link

将类$(this)添加到已被点击的链接

使用addClass()添加类，使用removeClass()删除类

Answer 2

使用jQuery，您可以查看click，点击时将current-link课程设置为不同的链接。

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

看看这个小提琴：

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

希望它能解决你的问题。

Answer 3

您在JS上已经完成了一些操作，无法为您的菜单启用/禁用活动课程.current-link。每次单击一个都不需要替换所有DOM元素。通常，您遍历所有导航项，删除不需要的类，然后将活动类添加到单击的导航项。

请注意，我缓存了导航的元素，因此每次有人点击链接时都不需要查询DOM。我还使用了委托方法来应用click处理程序，因此我们不为每个<a>元素添加处理程序，而是为祖先元素#navbar-top添加单击处理程序。

$( document ).ready( function () {
  
  var $navbarTop      = $( '#navbar-top' );
  var $navbarTopLinks = $navbarTop.find( 'a' );
  
  $navbarTop.on( 'click', 'a', function ( e ) {
  
    e.preventDefault();    
    $navbarTopLinks.removeClass( 'current-link' );
    $( this ).addClass( 'current-link' );
  
  } );
  
} );

#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="current-link">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
  </ul>
</div>

<a> style - fade link color on click

3 个答案: