最简单的 jquery tabs插件

不知道有没有朋友和我有一样的感觉,ui tabs插件 用起来还可以 只是说实话css 配置起来 忒累了,下面介绍大家一个简单的tabs 插件

代码

以下为引用的内容:

$.tabs = function(containerId, start) {

var ON_CLASS = 'on';

var id = '#' + containerId;

var i = (typeof start == "number") ? start - 1 : 0;

$(id + '>div:eq(' + i + ')').css({display:"block"});

$(id + '>ul>li:nth-child(' + i + ')').addClass(ON_CLASS);

$(id + '>ul>li>a').click(function() {

if (!$(this.parentNode).is('.' + ON_CLASS)) {

var re = /([_\-\w]+$)/i;

var target = $('#' + re.exec(this.href)[1]);

if (target.size() > 0) {

$(id + '>div:visible').css({display:"none"});

target.css({display:"block"});

$(id + '>ul>li').removeClass(ON_CLASS);

$(this.parentNode).addClass(ON_CLASS);

} else {

alert('There is no such container.');

}

}

return false;

});

};

代码是不是很精炼 呵呵。

使用例子

$.tabs('container-1', 1);

<DIV id=container-1>

<UL >

<LI><A href="#sectionb-1">aaaaaa</A>

</LI>

<LI><A

href="#sectionb-2">bbbbbbbbb</A>

</LI></UL>

<DIV class=anchor id=sectionb-1>aaaaaa</div>

<DIV class=anchor id=sectionb-2>bbbb</div></div>

当然 css 自己去配置吧

想配置成啥样就啥样

注意 :

tabs 插件代码 里面

var ON_CLASS = 'on';

大家看到了,这个是 选中后的css 当然您也可以配置别的名称。