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

Question

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

$('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');
});