Jquery-更改链接的颜色

我有以下资料：

     <div id="libdiv" class = "libraryheader ">
         <a href="#"  class="libraryheader" id="videoLink"  /> Videos </a>
         | <a  href="#" class="libraryheader"  id="articleLink" /> Articles </a> 
         | <a href="#" id="newsLink" class="libraryheader"  /> News </a>
     </div> 

所发生的事情是，当我选择它的链接，他们变成黄金，但当我选择另一个链接，先前选择的仍然是黄金，不会变成灰色。我只喜欢选择的链接是金色的。所有其他选项都应默认为灰色

以下是我的代码：

 $('#libdiv a').click(function () {

            $(this).removeClass('libraryheaderselected');
            $('#videoLink').addClass('libraryheader');
            $('#articleLink').addClass('libraryheader');
            $('#newsLink').addClass('libraryheader');

            $(this).addClass('libraryheaderselected');             


        });

你试过这个吗

$('#libdiv a').click(function () {
   $('#libdiv a').removeClass('libraryheaderselected');
   $('#videoLink').addClass('libraryheader');
   $('#articleLink').addClass('libraryheader');
   $('#newsLink').addClass('libraryheader');
   $(this).addClass('libraryheaderselected');  
});

---

您可以非常轻松地完成此操作，并且使用

$('#libdiv a').click(function () {
    // Toggle the two classes on the clicked item. Since all items start with
    // just the class libraryheader, this will remove it and add the selected
    $(this).toggleClass("libraryheader libraryheaderselected")
        // Then go work on the sibling links (i.e. all except the one clicked)
        .siblings("a")
        // and reset them back to "libraryheader" status
        .removeClass("libraryheaderselected").addClass("libraryheader");
});

一旦你这样做了，你就可以忘记它；无论链接的数量或ID如何，它都可以工作

$("#libdiv a").on("click",function(){
  $(this).addClass("libraryheaderselected");
  $(this).siblings().removeClass("libraryheaderselected");
});

这将更加有效，因为您不必将类作为单独的函数从每个链接中删除，您可以将其作为两个方法来执行。第一个将类添加到您单击的内容中。第二个从其所有同级中删除该类

以下是一个示例：

---

首先，无需从任何链接中添加或删除

libraryheader

类。HTML元素一次可以有多个类。这意味着您的所有链接都可以保留

libraryheader

类，而您只需切换指定其文本颜色的辅助类（

选定的

）

因此，您的JS只需要以下内容：

$('#libdiv a').click(function () {
    $('#libdiv a.selected').removeClass('selected');
    $(this).addClass('selected');
});

而且，CSS是多余的。您所需要的就是：

 .libraryheader
 {

    font-family: sans-serif;
    font-size: 24px;
    color: #4F5A5E;  /* grey color */ 
    text-decoration: none;
 }

.libraryheader.selected
{
    color: gold;
}

$('#libdiv a').click(function () {
    $('#libdiv a.selected').removeClass('selected');
    $(this).addClass('selected');
});

 .libraryheader
 {

    font-family: sans-serif;
    font-size: 24px;
    color: #4F5A5E;  /* grey color */ 
    text-decoration: none;
 }

.libraryheader.selected
{
    color: gold;
}