juqery实现多标签页的切换

来源：互联网发布：电子驱蚊器软件编辑：程序博客网时间：2024/06/05 05:58
<!DOCTYPE HTML><html><head>    <meta charset='utf-8'/>    <title>demo</title>    <script src='js/jquery-1.11.3.js'></script>    <style>        * {            margin: 0px;            padding: 0px;        }        #tab1 {            background: #ff0000;        }        #tab2 {            background: #00ff00;        }        #tab3 {            background: #0000ff;        }        #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;        }        #content1 {            background: #ff0000;        }        #content2 {            background: #00ff00;        }        #content3 {            background: #0000ff;        }    </style></head><body><ul id="tab">    <li id="tab1" value="1">the first page</li>    <li id="tab2" value="2">the second page</li>    <li id="tab3" value="3">the third page</li></ul><div id="container">    <div id="content1" style="z-index: 1;">三百年风吹，三百年日晒，三百年雨打，只为等你从桥边经过</div>    <div id="content2">三百年风吹，三百年日晒，三百年雨打，只为等你从桥边经过</div>    <div id="content3">三百年风吹，三百年日晒，三百年雨打，只为等你从桥边经过</div></div></body><script>    $(" #tab > li ").click(function(){        $("div[style='z-index:1;']").removeAttr("style");        var num = $(this).val();        $("#content"+num).attr("style","z-index:1;");    })</script></html>
0 0