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