Table栏切换

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>可多次使用的jQuery tab选项卡</title>
    <style type="text/css">
        /*通用样式*/
        *{ margin:0; padding:0;}
        body { font:12px/1.8 Arial; color:#666;}
        ul,li{ list-style:none;}
        h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
        .wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px;}
        /* 本案例需要的css样式 */
        .tab{ width:450px; margin:0 auto 50px;}
        .tab-hd { background:#F93; overflow:hidden; zoom:1;}
        .tab-hd li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;}
        .tab-hd li.active{ background:#F60;}
        .tab-bd li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;}
        .tab-bd li.thisclass{ display:list-item;}
    </style>
</head>
<body>
    <h1 class="tit-h1">jQuery tab选项卡插件(可多次使用)</h1>
    <div class="wrap">
        <div class="tab">
            <ul class="tab-hd">
                <li class="active">选项1</li>
                <li>选项2</li>
                <li>选项3</li>
            </ul>
            <ul class="tab-bd">
                <li class="thisclass">内容1</li>
                <li>内容2</li>
                <li>内容3</li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        //匿名函数自调
        $(function(){
            //声明函数，参数三个：导航标题、当前选择项、当前标题显示内容
            function tabs(tabTit,on,tabCon){
                //找到所有标题并添加单机事件
                $(tabTit).children().click(function(){
                    //声明当前选择项
                    var index = $(tabTit).children().index(this);
                    //为当前选中项增加active，移除其兄弟元素的active
                    $(this).addClass(on).siblings().removeClass(on);
                    //选中项显示内容，未选中项隐藏内容
                    $(tabCon).children().eq(index).show().siblings().hide();
                });
            };
            tabs(".tab-hd","active",".tab-bd");
        });
    </script>
</body>
</html>
猜你喜欢
