Question

I have 3 tabs, created by js. Active tab has class named “active” and it changes on every click on the tabs

<div class='tab'>
    <ul class='tabs'>
    <li class="active"><a href='http://link1.com#t1'>First</a></li>
    <li><a href='http://link2.com#t2'>Second</a></li>
    <li><a href='http://link3.com#t3'>Third</a></li>    
    </ul>
<div>
    <h2>First tab!</h2>
</div>
<div>
    <h2>Second tab!</h2>
</div>
<div>
    <h2>Thrid tab1</h2> 
    </div>
</div>

Links returns ‘false’ by default. I need to create some js function, that enables link (onclick=”return true”;) on the active tab, and disables it, when I switch to the other tab (li). Appreciate any help.

Answer 1

I can suggest you to check dynamically whether the parent element (in this case li element) has class active and return the negative value

$('#tabs a').on('click', function(){
    // if parent has class active returns false
    return !$(this).parent().hasClass('active'); 
});