Question

I think I could use .next on this, not sure, if there’s a better way please let me know. I have a tab set up with an UL, each LI in the UL has a 1px dotted border on the bottom except the “active” li. The “active” tab has a background image. I need to remove the border if the LI after any LI has the class active.

<ul id="flowtabs">
  <li><a href="t1">Analysis</a></li>
  <li><a href="t2">Manual Trading</a></li>
  <li><a href="t3" class="active">Automatic Trading</a></li>
  <li><a href="t4">Simulate</a></li>
  <li><a href="t5">Connect</a></li>
  <li><a href="t6">Extend</a></li>
</ul>

$(document).ready(function() {
    if($('#flowtabs li a').hasClass('active').next('css','border','none')
}

I would want <a href="t2"> and <a href="t4"> to have their border removed, and have this applied any time a li has the class active.

I don’t think the construction is right, is there a better way to remove the border from the LI before and after the one that has the class ‘active’

here’s an image to help: http://img693.imageshack.us/img693/5384/screenshot20100907at147.png

Thanks!

Answer 1

This does what you specifically asked for, removing the border from the <li>s on either side of the active <li>:

$(function() {
    $('#flowtabs li a.active').parent('li').next().add($('#flowtabs li a.active').parent('li').prev()).css('border','none');
});

Here’s a working demo: http://jsfiddle.net/WUu2F/

This does what I think you actually want, which I mentioned in my comment on your question:

$(function() {
    $('#flowtabs li a.active').parent('li').prev().andSelf().children('a').css('border','none');
});

And a demo of that: http://jsfiddle.net/k5sur/