您的位置：首页 > Web前端 > JavaScript

Tab选项卡 javascript 原生实现

2018-01-27 00:07 363 查看

Tab选项卡用的还是挺多的，现在我们使用javascript 实现：

效果图：无附加和修饰，简单实现

全部代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab 选项卡</title>
<style>
*{margin:0; padding:0;}
#abc{width:400px; height:400px; background-color:#eee; position:absolute;
left:50%;top:50%; margin-left:-200px; margin-top:-200px;}
#abc ul{width:400px; height:100px; background-color:#ccc; list-style-type:none;
padding:0; margin:0;}
#abc ul li{float:left; width:98px; height:100px; border:1px solid rgb(83, 43, 43);
text-align:center; line-height:100px; cursor:pointer;}
#abc .div_hide{width:400px; height:300px; display:none;}
#abc .div_show{display:block;width:400px; height:300px;}
</style>
</head>
<body>

<div id="abc">
<ul>
<li>新闻</li>
<li>视频</li>
<li>音乐</li>
<li>游戏</li>
</ul>
<div class="div_show">新闻的内容</div>
<div class="div_hide">视频的内容</div>
<div class="div_hide">音乐的内容</div>
<div class="div_hide">游戏的内容</div>
</div>
<script>
var abc=document.getElementById("abc");
var obj_title=abc.getElementsByTagName("li");
var obj_content=abc.getElementsByTagName("div");
for(var i=0;i<obj_title.length;i++){
obj_title[i].value=i;
obj_title[i].onclick=function(){
for(var j=0;j<obj_content.length;j++){ //置空所有 div  使之不显示
obj_content[j].className="div_hide";
}
obj_content[this.value].className="div_show";
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript tab

相关文章推荐

新的分享

章节导航