在鏈接選擇上使用jQuery添加/刪除類

Question

我正在嘗試在jQuery中編寫一個函數，該函數會將一個類添加到選定的鏈接（在iframe中打開頁面），然后在選擇另一個鏈接時刪除該類。 之前，我從另一個成員那里得到了一些類似類型的幫助，但其中涉及單選按鈕和表格。

我嘗試玩了一段時間，但是jQuery對我來說仍然很新，所以我對此並不了解。

基本上，我在<div id="CollapsiblePanelContent"> ... </div>包含大約3-4組鏈接，我想在用戶選擇的此容器內的<a>標簽中添加樣式。

任何幫助將不勝感激。 謝謝。

<div id="CollapsiblePanelContent">  
  <a href="page1.asp" onclick="return handlelink(this)">Link1</a>
  <a href="page2.asp" onclick="return handlelink(this)">Link2</a>
  <a href="page3.asp" onclick="return handlelink(this)">Link3</a>
  <a href="page4.asp" onclick="return handlelink(this)">Link4</a>
</div>

<script type='text/javascript'>
  $(function() {
    $('div').click(function(event) {
      $(this).closest('.CollapsiblePanelContent').addClass('selected').parent().siblings().each(function() {
        $(this).find('.CollapsiblePanelContent').removeClass('selected');
      });
    });
  });
</script>

Answer 1

$('#CollapsiblePanelContent a').on('click', function(e){
  e.preventDefault(); // prevent page reload, you may remove it if don't need
  $(this).addClass('selected').siblings().removeClass('selected');
});

由於CollapsiblePanelContent是id因此正確的選擇器將是#CollapsiblePanelContent而不是.CollapsiblePanelContent 。

但是如果你使用CollapsiblePanelContent多div當時的而不是id應該是class與選擇.CollapsiblePanelContent 。 因為多個元素可以具有相同的id 。

Answer 2

你可以試試 ：

function handlelink(this)
{
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
//do the rest with the click
}

Answer 3

根據HTML，您提供了以下功能：

$(function() {
    $('.CollapsiblePanelContent a').click(function() {
        $(this).addClass('selected').siblings().removeClass('selected');
    });
});

這會將click事件處理程序綁定到<div class="CollapsiblePanelContent">內的任何<a>元素，這會將selected類添加到被單擊的鏈接中，並從其所有同級中移除相同的類。