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

最新推荐文章于 2024-07-29 18:19:14 发布

zhengbo0

最新推荐文章于 2024-07-29 18:19:14 发布

阅读量811

点赞数

分类专栏： jquery

jquery 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的动态标签切换功能，通过HTML和CSS构建了一个简单的页面，展示了如何实现在不同标签间切换内容，同时使用jQuery简化了交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
        <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
        /**
         * 考虑到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");
        	});
        };
        </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">1</li>
                <li tar="cate2">2</li>
                <li tar="cate3">3</li>
                <li tar="cate4">4</li>
            </ul>
        </div>
        <div>
            <div id="cate1" style="display:block;">
            	1
             </div>
            <div id="cate2" style="display:none;">
            	2
            </div>
            <div id="cate3" style="display:none;">
                3
            </div>
            <div id="cate4" style="display:none;">
                4
            </div>
        </div>
    </body>
    <script>
        tab("tab","selected");
    </script>
</html>