0

我正在尝试在 jQuery 中编写一个函数，它将一个类添加到选定的链接（在 iframe 中打开一个页面），然后在选择另一个链接时删除该类。我以前从这里的另一位成员那里得到了一些类似的帮助，但涉及单选按钮和表格。

我尝试使用它一段时间，但 jQuery 对我来说仍然很新，所以我对它了解不多。

基本上，我包含大约 3-4 组链接<div id="CollapsiblePanelContent"> ... </div>，我想<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>
4

3 回答 3

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

但是如果你使用CollapsiblePanelContentfor multiple s 那么应该用 selectordiv代替它。因为多个元素可以有相同的 .idclass.CollapsiblePanelContentid

于 2012-07-07T17:09:38.077 回答
1

你可以试试 ：

function handlelink(this)
{
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
//do the rest with the click
}
于 2012-07-07T17:09:00.930 回答
0

根据您提供的 HTML，以下内容应该可以工作：

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

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

于 2012-07-07T17:08:48.590 回答