djkp djkp - 2 months ago 11
Javascript Question

siblings() in jQuery is not working

I tried to achieve tabs using jQuery. Making the current tab class active is working, but to make its sibling's class null is not working.



jQuery(document).ready(function() {
jQuery('.container .tab-links a').on('click', function(e) {

var currentAttrValue = jQuery(this).attr('href');
console.log(currentAttrValue);
// jQuery(this).addClass('active').siblings.removeClass('active');
// Show/Hide Tabs
//jQuery(currentAttrValue).show().siblings().hide();

// Change/remove current tab to active
jQuery(this).addClass('active');
jQuery(this).siblings().find('a').removeClass('active');
jQuery('each_tab').not(currentAttrValue).css("display", "none");
jQuery(currentAttrValue).css("display", "block");

e.preventDefault();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id="features">
<header>
<div class="features-switcher">
<div class="container">
<ul class="tab-links">
<li>
<a class="active" href="#tab1">
<span>tab one</span>
</a>
</li>
<li>
<a class="" href="#tab2">
<span>tab two</span>
</a>
</li>
<li>
<a class="" href="#tab3">
<span>tab three</span>
</a>
</li>
</ul>
</div>
</div>
<hr>
</header>
<div class="tab-content">
<div id="tab1" class="tab--active">
<section class="container">
<h2> content of tab 1</h2>
<hr>
</section>
</div>
<div id="tab2" class="tab--inactive">
<section class="container">
<h2> content of tab 2</h2>
</section>
</div>
<div id="tab3" class="tab--inactive">
<section class="container">
<h2> content of tab 3</h2>
</section>
</div>
</div>
</section>




Answer

The <a> elements in questions have no siblings. The containing <li> elements do.

Target those — and their descendant <a> tags — instead, with:

jQuery(this).parent().siblings('li').find('a').removeClass('active');

Your each_tab query can be replaced with:

jQuery('.tab-content > div').not(currentAttrValue).
   hide().  
   addClass('tab--inactive').
   removeClass('tab--active');
jQuery(currentAttrValue).
   show().
   addClass('tab--active').
   removeClass('tab--inactive');