jQuery的 - 鏈接

Question

的改變顏色，我有以下：

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

正在發生的事情是，當我選擇它的鏈接，他們把金，但是當我選擇了另一個環節，prevously選擇的遺體金，不變成灰色。我只喜歡選定的鏈接是黃金。所有其他人應該默認爲灰色。

下面是我的代碼有：

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

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

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


     }); 

Answer 1

首先，有無需從任何一個鏈接的添加或刪除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; 
} 

Answer 2

你試試這個？

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

Answer 3

一旦你這樣做，你可以忘掉它可以使用

$('#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。

Answer 4

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

這樣會更有效，因爲您不必從每個鏈接中刪除一個類作爲單獨的函數，您可以將它作爲2個方法來完成。第一個將該類添加到您點擊的內容中。從所有它的兄弟姐妹

Answer 5

的第二去除類下面是一個例子：http://jsbin.com/ebECOR/1/edit

var links = $('#libdiv a'); 
$('#libdiv').on('click', 'a', function(e) { 
    e.preventDefault(); 
    $(links).removeClass('libraryheaderselected'); 
    $(this).addClass('libraryheaderselected'); 
});