jquery经典实例之选项卡-蒲公英云

jquery经典实例之选项卡

快来打我* 2021-07-24 15:57 493阅读 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>