jquery - 样式 - 点击时淡化链接颜色

Question

在 ul 中有几个链接，在鼠标悬停 (a:hover) 时具有漂亮的 css 颜色转换。

1. 当用户点击另一个链接时，如何让 anchor 的颜色淡回到#374659？

2. 此外，下面的 jQuery 应该使一个链接(类“current-link”)变成红色，但由于某种原因，单击链接 1/2/3 后它会卡住。

这就是我现在拥有的:

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

感谢您的关注!

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()删除类