Whenever the user interacts with a div.nav element, jQuery switches its class to active. Presently, it applies display: block to all three of the div.content elements. I aim for jQuery to only apply the display: block property to the div.content elements that possess the active class. Below is my code:
$('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;
}
What steps should I take in this scenario?