1

我有以下内容：

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

当我点击一个链接时，我喜欢我喜欢链接的颜色变成金色，而其他链接是灰色的。

    .libraryheader
     {

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

    .libraryheaderselected
    {

      font-family: sans-serif;
      font-size: 24px;
      color: gold;
      text-decoration: none;
    }

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

这是我的代码：

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

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

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


        });
4

5 回答 5

0

你试过这个吗？

$('#libdiv a').click(function () {
   $('#libdiv a').removeClass('libraryheaderselected');
   $('#videoLink').addClass('libraryheader');
   $('#articleLink').addClass('libraryheader');
   $('#newsLink').addClass('libraryheader');
   $(this).addClass('libraryheaderselected');  
});
于 2013-09-24T19:53:13.960 回答
0

你可以很容易地做到这一点，使用更少的麻烦

$('#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如何，它都可以工作。

于 2013-09-24T19:54:48.907 回答
0 
$("#libdiv a").on("click",function(){
  $(this).addClass("libraryheaderselected");
  $(this).siblings().removeClass("libraryheaderselected");
});

这会更有效，因为您不必从每个链接中删除一个类作为单独的函数，您可以将其作为 2 个方法来完成。第一个将类添加到您单击的内容中。第二个从其所有兄弟姐妹中删除该类

于 2013-09-24T19:58:19.270 回答
0

这是一个例子：http: //jsbin.com/ebECOR/1/edit

var links = $('#libdiv a');
$('#libdiv').on('click', 'a', function(e) {
  e.preventDefault();
  $(links).removeClass('libraryheaderselected');
  $(this).addClass('libraryheaderselected');
});
于 2013-09-24T20:02:28.470 回答
0

首先，不需要在libraryheader任何链接中添加或删除类。HTML 元素一次可以有多个类。这意味着您的所有链接都可以保留libraryheader该类，而您只需切换指定其文本颜色的辅助类（selected例如）。

因此，您的 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;
}
于 2013-09-24T20:10:03.100 回答