jquery经典实例之选项卡

快来打我* 2021-07-24 15:57 432阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="GBK">
        <title>Title</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            #outer {
                width: 600px;
                height: 400px;
                margin: 0 auto;
                border: 1px solid #ccc;
            }
            ul li {
    
                margin: 0;
                padding: 0;
                list-style: none;
            }
     		.tab-tilte{
                width: 99%;
            }
            .tab-tilte li{
                float: left;
                width: 25%;
                padding: 10px 0;
                text-align: center;
                background-color:#f4f4f4;
                cursor: pointer;
            }
         /* 点击对应的标题添加对应的背景颜色 */
            .tab-tilte .active{
                background-color: #09f;
                color: #fff;
            }
            .tab-content div{
                width: 25%;
                line-height: 100px;
                text-align: center;
            }
            .hide{
            	display:none;
            }
        </style>
    </head>
    <body>
        <div class="outer">
              <ul class="tab-tilte">
                  <li id="tab_1" class="active" onclick="select_tab(this);">菜单一</li>
                  <li id="tab_2" onclick="select_tab(this);">菜单二</li>
                  <li id="tab_3" onclick="select_tab(this);">菜单三</li>
              </ul>
              <div class="tab-content">
                  <div id="tab_1_content">内容一</div>
                  <div id="tab_2_content" class="hide">内容二</div>
                  <div id="tab_3_content" class="hide">内容三</div>
              </div>
        </div>
    
        <script src="jquery-1.5.1.js"></script>
        <script>
            function select_tab(self) {
                $(self).addClass("active").siblings().removeClass("active");
                var contentId = "#" + $(self).attr("id")+"_content";
                $(contentId+"").removeClass("hide").siblings().addClass("hide");
            }
        </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/de7134fba8fe44ed992558ce0e2bf44d.png