首页 > 代码库 > 【HTML5】选项卡

【HTML5】选项卡

2024-09-12 06:19:31   215人阅读

 

效果图：

 

技术分享

 

HTML：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <link rel="stylesheet" type="text/css" href="css/style.css" />        <script type="text/javascript" language="JavaScript" src="js/script.js"></script>    </head>    <body>        <div class="body">            <div class="box" id="box">                <ul class="title">                    <a href="#"><li id="t1" onclick="oclick(‘t1‘)">新闻</li></a>                    <a href="#"><li id="t2" onclick="oclick(‘t2‘)">杂志</li></a>                    <a href="#"><li id="t3" onclick="oclick(‘t3‘)">动漫</li></a>                    <a href="#"><li id="t4" onclick="oclick(‘t4‘)">音乐</li></a>                </ul>                <div id="d1" style="display: none">                                    </div>                <div id="d2" style="display: none">                                    </div>                <div id="d3" style="display: none">                                    </div>                <div id="d4" style="display: none">                                    </div>            </div>        </div>    </body></html>

 

CSS：

    *{padding: 0; margin: 0;}    .box .title,.box .title li{padding:0;margin: 0;}    .body{width: 1200px; height: 1000px; box-shadow: 0 0 5px gray; margin: 0 auto; border: 1px solid #fff;}    .box{width: 820px; height: 366px;  box-shadow: 0 0 5px gray; margin: 200px auto; border: 1px solid #fff;}    .box .title{list-style: none; text-align: center;}    .box .title li{width:80px; height:40px; font:12px/40px "微软雅黑"; float:left; background:ghostwhite; border:1px solid #f2f2f2;}    .box .title a li:hover{background:#F2F2F2}    .box div{width:820px; height:320px; margin-top:46px;}

 

JS:

// This is Glunefish js function.    function oclick(x){var obj = document.getElementById(x);        obj.style.border=‘none‘;        obj.style.background=‘#fff‘;        var ttotal = [‘t1‘,‘t2‘,‘t3‘,‘t4‘];        for(var i=0;i<4;i++){            if(ttotal[i] == x){                boxchange(i) ;                ttotal.splice(i,1);                continue;}            }        for(var i=0;i<ttotal.length;i++){            var obj = document.getElementById(ttotal[i]);            obj.style.border=‘1px solid #f2f2f2‘;            obj.style.background=‘ghostwhite‘;}        }    function boxchange(x){        var dlist = [‘d1‘,‘d2‘,‘d3‘,‘d4‘];        for(var i=0;i<dlist.length;i++){            document.getElementById(dlist[i]).style.display=‘none‘}            var div = document.getElementById(dlist[x]).style.display=‘block‘;    }    onl oad = function(){oclick(‘t1‘);}

 

【HTML5】选项卡


联系
我们