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事件处理程序绑定到<a>内的任何<div class="CollapsiblePanelContent">元素，这会将selected类添加到单击的链接中，并从其所有同级中删除相同的类。 / p>

在链接选择上使用jQuery添加/删除类

3 个答案: