首页 > 代码库 > 【HTML5】选项卡
【HTML5】选项卡
效果图：
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】选项卡
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。