jQuery选项卡-页面上有多个集合 [英] jQuery tabs - multiple sets on on page
问题描述
这是我之前发布的一个问题的后续内容,但我无法使其正常工作.
This is kind of a follow on from a previous question I posted but I've not been able to get it to work..
我正在尝试在一页上使用多组选项卡(jQuery).
I'm trying to use multiple sets of tabs (jQuery) on one page.
这是我为一组选项卡使用的代码,效果很好:
This is the code I had for one set of tabs which works great:
$('div.tabs div.tab').hide();
$('div.tabs div:first').show();
$('div.tabs ul.htabs li:first a').addClass('current');
$('div.tabs ul.htabs li a').click(function(){
$('div.tabs ul.htabs li a').removeClass('current');
$(this).addClass('current');
var currentTab = $(this).attr('href');
$('div.tabs div.tab').hide();
$(currentTab).show();
return false;
});
要在页面上使用多个集合,我将#id分配给每个选项卡集,并尝试通过以下方式实现这一点:
To use more than one set on the page I assigned #id's to each tab-set and tried to impliment this with:
$.each(['#tabs-1', '#tabs-2', '#tabs-3' ], function(id) {
$(id + 'div.tab').hide();
$(id + 'div:first').show();
$(id + 'ul.htabs li:first a').addClass('current');
$(id + 'ul.htabs li a').click(function(){
$(id + 'ul.htabs li a').removeClass('current');
$(this).addClass('current');
var currentTab = $(this).attr('href');
$(id + 'div.tab').hide();
$(currentTab).show();
return false;
});
});
很显然,我在这里做错了事,但是作为jQuery新手,我很困惑!
Obviously I'm doing something wrong here but as a jQuery newcomer I'm stumped!
推荐答案
好,因此即使在代码中使用正确的间距也无法正常工作,但我发现了一种更轻巧的解决方案,它非常有效– jQuery MiniTabs:
okay, so this was not working even with the correct spacing in the code but I have found a much more light-weight solution which works perfectly – jQuery MiniTabs:
/*
* jQuery MiniTabs 0.1 - http://code.google.com/p/minitabs/
*/
jQuery.fn.minitabs = function(speed,effect) {
var id = "#" + this.attr('id')
$(id + ">div:gt(0)").hide();
$(id + ">ul>li>a:first").addClass("current");
$(id + ">ul>li>a").click(
function(){
$(id + ">ul>li>a").removeClass("current");
$(this).addClass("current");
$(this).blur();
var re = /([_\-\w]+$)/i;
var target = $('#' + re.exec(this.href)[1]);
var old = $(id + ">div");
switch (effect) {
case 'fade':
old.fadeOut(speed).fadeOut(speed);
target.fadeIn(speed);
break;
case 'slide':
old.slideUp(speed);
target.fadeOut(speed).fadeIn(speed);
break;
default :
old.hide(speed);
target.show(speed)
}
return false;
}
);
}
使用此代码,您可以添加:
Using this code you can then add:
$('#tabs-1').minitabs();
$('#tabs-2').minitabs();
$('#tabs-3').minitabs();
一切正常!
这篇关于jQuery选项卡-页面上有多个集合的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!