tab页切换

最新推荐文章于 2024-07-05 14:27:03 发布

辣姐什么鬼

最新推荐文章于 2024-07-05 14:27:03 发布

阅读量1.4k

点赞数

分类专栏： web前端文章标签： web前端

本文链接：https://blog.csdn.net/liona_koukou/article/details/52678198

版权

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

效果图：

网上找了个图片按着模样实现的，tab按钮背景图片自己画的不大好看_(:зゝ∠)_

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #tab{
            width:600px;
            height:280px;
            position:relative;
            margin:140px auto;
        }
        #tab div{
            position:absolute;
            top:40px;
            left:0;
            width:600px;
            height:280px;
            border:40px solid #7199d6;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
            z-index:100000;
            display:none;
            padding:20px;
            font-size:20px;
        }
        #tab .block{
            display:block;
        }
        #tab h3{
            float:left;
            width:150px;
            height:40px;
            line-height:40px;
            font-size:12px;
            cursor:pointer;
            color:#5a5a5a;
            text-indent:50px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            position:relative;
        }
        #tab .up{
            color:#fff;
            z-index:1000;
            position:relative;
        }
        #two2{
            left:-30px;
            background:url(bg4.png);
        }
        #two1{
            background:url(bg.png);
        }
        #two3{
            left:-60px;
            background:url(bg.png);
        }
        #two4{
            left:-90px;
            background:url(bg4.png);
        }
        .maskBox{
            display: block;
            width:10px;
            height:10px;
            position: absolute;
            top:40px;
            left:0;
            background:#7199d6;
            z-index:10000;

        }
    </style>
</head>
<body>
<div id="tab">
    <h3 class="first up" id="two1" onclick="setContentTab('two',1,4)">tab1</h3>
    <a class="maskBox"></a>
    <div class="block" id="con-two-1">
       tab1
    </div>
    <h3 id="two2" onclick="setContentTab('two',2,4)">tab2</h3>
    <div id="con-two-2">
        tab2
    </div>
    <h3 id="two3" onclick="setContentTab('two',3,4)">tab3</h3>
    <div id="con-two-3">
        tab3
    </div>
    <h3 id="two4" onclick="setContentTab('two',4,4)">tab4</h3>
    <div id="con-two-4">
        tab4
    </div>
</div>
<script>
    function setContentTab(name,curr,n){
        for(var i=1;i<=n;i++){
            var menu=document.getElementById(name+i);
            var cont=document.getElementById("con-"+name+"-"+i);
            menu.className=i==curr?"up":"";
            if(i==curr){
                cont.style.display="block";
            }else{
                cont.style.display="none";
            }
        }
    }
</script>
</body>
</html>

还有两张背景图片

辣姐什么鬼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
tab页切换

效果图：网上找了个图片按着模样实现的，tab按钮背景图片自己画的不大好看_(:зゝ∠)_代码： &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &a
复制链接

扫一扫