基于jquery，9行js轻松实现tab控件

最新推荐文章于 2019-03-23 08:35:05 发布

转载最新推荐文章于 2019-03-23 08:35:05 发布 · 546 阅读

JS 专栏收录该内容

122 篇文章

订阅专栏

http://www.oschina.net/code/snippet_273800_15428

[代码]核心代码

/**
 * 考虑到tab和pane有可能被动态的添加和删除，
 * 所以每次都废点时间去查找先前被激活的tab
 */
var 
tab = function(tabId,activeId){
    $("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){
        $("#"+$("#"+activeId).attr("tar")).css("display","none");
        $("#"+activeId).removeAttr("id");
         
        $(this).attr("id",activeId);
        $("#"+$(this).attr("tar")).css("display","block");
    });
};

demo代码

<html>
    <head>
        <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
        <script type="text/javascript"
src="index.js"></script>
        <script type="text/javascript"
src="jquery-1.8.2.js"></script>
    </head>
    <style>
        li{
            border:1px solid
#b5e2f3;
            border-bottom:0px;
            float:left;
            width:100px;
            height:25px;
            margin:0 7px;
            background:#F1FEF3;
            padding:9px 0 0 0;
            text-align:center;
            color:#33a3dc;
            cursor:pointer;
        }
        ul{
            width:800;
            height:36px;
            border-bottom:1px solid
#b5e2f3;}
        #selected{
            background:#FFF!important;
            border-bottom:2px solid
#FFF!important;
        }
        ul{margin:-1px;}
        #cate1,#cate2, #cate3, #cate4, #cate5{
            clear:both;
            height:300px;
            background:#FFFFFF;
            width:800px;
            height:100px;
            padding:25px;
            border:1px solid
#b5e2f3;
        }
    </style>
    <body>
        <div id="tab">
            <ul>
                <li tar="cate1"
id="selected">李开复</li>
                <li tar="cate2">linus</li>
                <li tar="cate3">李白</li>
                <li tar="cate4">孔子</li>
            </ul>
        </div>
        <div>
            <div id="cate1"
style="display:block;">
                        李开复与中国大学生的近距离接触始于1990年，那时他受联合国邀请来华演讲两周。他到了很多高校，每次演讲结束时，
                        满屋子的学生都不愿离去。他们不停地抛出问题，想知道怎样才能成为一个被微软这样世界顶级公司认可的人才。“一定要帮帮他们。”
                        李开复说，自己被大学生渴望成才的热情感动了。之后，只要学生们给他写信，或者邀请他做演讲，他能做的，都会不遗余力。</div>
            <div id="cate2"
style="display:none;">
            Linus Torvalds，Linux核心的创作者，于1969 年12月28 日出生在芬兰的赫尔辛基。“有些人生来就具有统率百万
                        人的领袖风范；另一些人则是为写出颠覆世界的软件而生。唯一一个能同时做  linus到这两者的人，就是托瓦兹。”美国《时代》
                        周刊对Linux之父李纳斯·托瓦兹（Linus Torvalds）给出了极高的评价。甚至，在《时代》周刊根据读者投票评选出的二十世纪
            100位最重要人物中， 李纳斯居然排到了第15位，而从20世纪的最后几年就开始霸占全球首富称号的盖茨不过才是第17位。</div>
            <div id="cate3"
style="display:none;">
                        小隐慕安石。远游学子平。天书访江海。云卧起咸京。入侍瑶池宴。出陪玉辇行。夸胡新赋作。
                        谏猎短书成。但奉紫霄顾。非邀青史名。庄周空说剑。墨翟耻论兵。拙薄遂疏绝。归闲事耦耕。
                        顾无苍生望。空爱紫芝荣。寥落暝霞色。微茫旧壑情。秋山绿萝月。今夕为谁明。
             </div>
            <div id="cate4"
style="display:none;">
                        君于惠而不费，劳而不怨，欲而不贪，泰而不骄，威而不猛。
            ……因民之利而利之，斯不亦惠而不费乎？择可劳而劳之，又谁怨？欲仁而得仁，又焉贪？君子无众寡、
                        无小大、无敢慢，斯不亦泰而不骄乎？君子正其衣冠，尊其瞻视，俨然人望而畏之，斯不亦威而不猛乎？</div>
        </div>
    </body>
    <script>
        tab("tab","selected");
    </script>
</html>