views:

101

answers:

3

Why $('a.current').removeClass('current'); is not working for this jquery tabs? http://jsfiddle.net/laukstein/ytnw9/8/

 //full JS in http://jsfiddle.net/laukstein/ytnw9/8/
 $(function(){
 var list=$('#list'),
     elementsPerRow=-1,
     loop=true,
     // find first image y-offset to find the number of images per row
     topOffset=list.find('a:eq(0)').offset().top,
     numTabs=list.find('li').length-1,
     current,newCurrent;

 function changeTab(diff){
  // a.current set by jQuery Tools tab plugin
  $('li.current').removeClass('current');
  current=list.find('a.current').parent('li').addClass('current').index();
  newCurrent=(loop)?(current+diff+numTabs+1)%(numTabs+1):current+diff;
 if(loop){
   if(newCurrent>numTabs){newCurrent=0;}
   if(newCurrent<0){newCurrent=numTabs;}
 }else{
   if(newCurrent>numTabs){newCurrent=numTabs;}
   if(newCurrent<0){newCurrent=0;}
 }
  // don't trigger change if tab hasn't changed (for non-looping mode)
 if (current!=newCurrent){
   list.find('li').eq(current).removeClass('current');
   list.find('li').eq(newCurrent).addClass('current').find('a').trigger('click'); // trigger click on tab
 }
 }
 list
  // set up tabs
  .tabs("#content",{effect:'ajax',history:true, xonBeforeClick:function(){changeTab(0)}})
  // find number of images on first row
  .find('a').each(function(i){
      if(elementsPerRow<0&&$(this).offset().top>topOffset){
         elementsPerRow=i;
      }
  });
 //$('a').filter('.current').parent('li').addClass('current'); // Why does not work?
 //$('a.current').parent('li').addClass('current'); // Why does not work?

 $('ul#list li').click(function(){$('li.current').removeClass('current');$(this).addClass('current')});
 $('a.current').removeClass('current'); // Why does not work?
});

HTML:

<ul id="list">
    <li><a href="one.html" title="one">1</a></li>
    <li><a href="two.html" title="two">2</a></li>
    <li><a href="three.html" title="three">3</a></li>
</ul>
<div id="content"></div>​
+1  A: 

As far as I can tell (I don't yet have a working page running your code), but it appears that the "current" class is only applied to "li" elements.

I think your $("a.current") will always contain 0 elements.

Oxyrubber
Then why Firebug and Chrome Inspect element shows that `a` has class `current`?
Binyamin
+1  A: 

Your .removeClass() call is working does clear the class, but then this line in your history plugin:

links.eq(0).trigger("history", [h]);

Is triggering your it to load the first link as in the <iframe> as the default...which is selecting that link again, adding the class back, it's ultimately the tab plugin selecting the first tab and at this line:

tab.addClass(conf.current);

Adding the class back to the anchor (the anchor is tab at that point).

Here's your fiddle updated with an alert to see what's happening a bit easier.

Nick Craver
Change to `tab.parent('li').addClass(conf.current);` fixes `li.current` that I need, **but it stops key event working**. Some idea to fix it? Is there some other way to enable `$('a.current').removeClass('current');` working?
Binyamin
@Binyamin - It's a timing issue, you need to trigger it after the first history call, which is triggering your tabs...or disable history defaults, by taking out the else statement with that link above altogether.
Nick Craver
Could you update http://jsfiddle.net/laukstein/ytnw9/8/? It may help me more.
Binyamin
+1  A: 

Hello,

it doesn't work because you haven't any <a> in your page with the class .current

You can check it out by yourself :

alert($('a.current').length);

will return you 0...

Arnaud F.
Then why Firebug and Chrome Inspect element shows that `a` has class `current`?
Binyamin