为什么 $('a.current').removeClass('current');不工作?
为什么 $('a.current').removeClass('current');
不适用于此 jquery 选项卡? 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>
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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
据我所知(我还没有运行您的代码的工作页面),但似乎“当前”类仅适用于“li”元素。
我认为你的 $("a.current") 将始终包含 0 个元素。
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.
它不起作用,因为您的页面中没有任何带有 .current 类的
您可以自己检查一下:
alert($('a.current' ).length);
将返回 0...
it doesn't work because you haven't any
<a>
in your page with the class .currentYou can check it out by yourself :
alert($('a.current').length);
will return you 0...
您的
.removeClass()
调用正在工作确实 清除类,但是历史记录插件中的这一行:正在触发您的它加载第一个链接,如
中的默认链接...这将再次选择该链接,将类添加回来,最终是选项卡插件选择第一个选项卡并在这一行:
将类添加回锚点(此时锚点是
tab
)。这是您的小提琴更新,带有警报,可以更轻松地查看发生的情况。
Your
.removeClass()
call is working does clear the class, but then this line in your history plugin: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: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.