切换选项卡tab效果

最新推荐文章于 2021-06-03 02:55:22 发布

kakaxiD

最新推荐文章于 2021-06-03 02:55:22 发布

阅读量547

点赞数

分类专栏：个人日记文章标签： JavaScript

本文链接：https://blog.csdn.net/kakaxiD/article/details/51073719

版权

个人日记专栏收录该内容

108 篇文章 1 订阅

订阅专栏

小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15_实现多页签切换效果</title>
    <script src="jquery-1.11.3.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #tab li {
            float: left;
            list-style: none;
            width: 80px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
        }

        #container {
            position: relative;
        }

        #content1, #content2, #content3 {
            width: 300px;
            height: 100px;
            padding: 30px;
            position: absolute;
            top: 40px;
            left: 0;
        }

        #tab1, #content1 {
            background-color: #ffcc00;
        }

        #tab2, #content2 {
            background-color: #ff00cc;
        }

        #tab3, #content3 {
            background-color: #00ccff;
        }

        .foreground {
            z-index: 1;
        }
    </style>
</head>
<body>
<h2>实现多标签页效果</h2>
<ul id="tab">
    <li id="tab1" value="1">10元套餐</li>
    <li id="tab2" value="2">30元套餐</li>
    <li id="tab3" value="3">50元包月</li>
</ul>
    <div id="container">
        <!--<div id="content1" class="foreground">-->
        <!--强调：使用style.设置的属性，默认格式都是:
            "属性: 值;"-->
        <div id="content1" style="z-index: 1;">
            10元套餐详情：<br />&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
        </div>
        <div id="content2">
            30元套餐详情：<br />&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
        </div>
        <div id="content3">
            50元包月详情：<br />&nbsp;每月无限量随心打
        </div>
    </div>

    <script>
    $("#tab>li").click(function(){
       var num = this.value;
        var $div=$("#content"+num);

        $div.attr("style","z-index:1;");
        $div.siblings("div").removeAttr("style");
    });

//  或者这样链式操作： $("#content"+this.value).attr("style","z-index: 1;").siblings("div").removeAttr("style");
//        });



    </script>
</body>
</html>