Question

当用户点击div.nav元素时，jQuery将其类更改为active。目前，它将display: block设置为所有三个div.content元素。我希望jQuery只在display: block类的div.content元素上设置active属性。这是我的代码：

$('div.nav').on('click', 'a:not(.active)', function() {
    $(this).addClass('active').siblings().removeClass('active')
});

$("div.nav a").click(function(){
    $("div.content").css("display", "block");
});

<div class="nav">
    <a class="active" href="#1"></a>
    <a href="#2"></a>
    <a href="#3"></a>
</div>
<div id="1" class="content active"></div>
<div id="2" class="content"></div>
<div id="3" class="content"></div>

.content {
    display: none;
}
.content.active {
    display: block;
}

我可以在这做什么？

Answer 1

如果您尝试在相应的.content元素中添加/删除该类，则可以检索所点击的href元素的a属性，以便形成选择器以选择.content元素。例如：

Working Example Here

$('div.nav').on('click', 'a:not(.active)', function() {
  var selector = this.getAttribute('href');

  $(this).addClass('active').siblings().removeClass('active');
  $(selector).addClass('active').siblings('.content').removeClass('active');
});

Answer 2

更改此行：

$("div.content").css("display", "block");

对此：

$("div.content.active").css("display", "block");

如果我理解正确的话。它只会定位具有内容和活动类的div元素。

jQuery目标元素的id属性使用另一个元素的href属性？

2 个答案: