juqery实现多标签页的切换

最新推荐文章于 2025-05-20 06:28:30 发布

Smileku

最新推荐文章于 2025-05-20 06:28:30 发布

阅读量811

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Smileku/article/details/52159973

本文介绍了一个简单的Tab选项卡切换效果实现方法，通过HTML、CSS和jQuery完成页面布局和交互逻辑。当点击不同的选项卡时，相应的内容区域会显示在最上层，其余内容则隐藏在下方。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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