jquery经典实例之选项卡

最新推荐文章于 2024-02-11 11:12:49 发布

编程界小明哥

最新推荐文章于 2024-02-11 11:12:49 发布

阅读量278

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/dkm123456/article/details/110817364

版权

jquery 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

效果图：

<!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>

编程界小明哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery经典实例之选项卡

效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="GBK"> <title>Title</title> <style> *{ margin: 0px; padding: 0px; } #outer { wi
复制链接

扫一扫