不知道有没有朋友和我有一样的感觉，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 style="WIDTH: 100%">
<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 当然您也可以配置别的名称。
有不明白的请大家去论坛发帖子吧
演示地址 http://www.cnjquery.com/demo/stabs.html
各位朋友谁有时间做一个漂亮一点的demo放到论坛上。。我更新一下，最近时间比较紧张不好意思
