javascript - Removing the class of a nav li - properly -

the basic visuals question available @ http://sevenx.de/demo/bootstrap-carousel/inc.carousel/tabbed-slider.html - in case wanted take peek it.

but here what's going on.

the html & css behind tabbed-carousel below. (i've shortened brevity purposes. )

<style>      #mycarousel-100 .nav small {             display:block;     }     #mycarousel-100 .nav {             background:#eee;     }     #mycarousel-100 .nav {             border-radius: 0px;     } </style>  <div class="container">      <div id="mycarousel-100" class="carousel slide" data-ride="carousel">          <div class="carousel-inner"><!-- wrapper slides -->              <div class="item active">                 panel 1 content             </div><!-- end item -->              <div class="item active">                 panel 2 content             </div><!-- end item -->          </div><!-- /wrapper slides -->           <ul class="nav nav-pills nav-justified">             <li data-target="#mycarousel-100" data-slide-to="0" class="active"><a href="#">panel 1</a></li>             <li data-target="#mycarousel-100" data-slide-to="1"><a href="#">panel 2</a></li>         </ul>       </div><!-- end carousel --> </div>                 

simple enough...

to kick start show, need stick following js @ footer. provided boostrap & jquery around, things work.

<script>         $('#mycarousel-100').carousel({                 interval:   4000          });          var clickevent = false;         $('#mycarousel-100').on('click', '.nav a', function() {                         clickevent = true;                         $('.nav li').removeclass('active');                         $(this).parent().addclass('active');                 }).on('slid.bs.carousel', function(e) {                 if(!clickevent) {                         var count = $('.nav').children().length -1;                         var current = $('.nav li.active');                         current.removeclass('active').next().addclass('active');                         var id = parseint(current.data('slide-to'));                         if(count == id) {                                 $('.nav li').first().addclass('active');                             }                 }                 clickevent = false;         }); </script>     

that's it.

first of all, problem here? well, there isn't any.

well, sort of...

as long not have tabbed-carousel that, there no problem @ all.

but, wanted have instance, id mycarousel-200 example.

well, can duplicate code , change every occurrence of -100 -200, , fine. right? no.

everything wwould work except when onclick event takes place ( on either instances), clicked-appearance of last clicked 1 in other carousel effected.

so, example, click on say, panel 2 of first carousel, see panel 2 content load first carousel view port. , link beneath panel 2 blue highlight. far good.

while so, if click on panel 1 or 2 of the other slider, realize first carousel's last clicked item's blue background disappear. @ time, first carousel have no clicked item appearance @ all. surely not want behaviour.

now, why happening?

that's happening because, js code has calls this;

 $('.nav li').removeclass('active');  

this code poorly written because there no name space target nav li elements in desired carousel narrow down action relevant carousel only.

to remedy situation, tried following... did not work...

$('#mycarousel .nav li').removeclass('active');  

what doing wrong?

try

$(this).closest('.nav').find('li').removeclass('active');