最简单的 jquery 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 当然您也可以配置别的名称。