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
topOffse开发者_C百科t=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>
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.
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...
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.
精彩评论