首页 > 其他 > 详细

tab菜单事件

时间:2016-12-09 08:19:53      阅读:228      评论:0      收藏:0      [点我收藏+]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.tab_head{
overflow: hidden;
}
button{
width: 50px;
height: 25px;
margin: 0;
float: left;
text-align: center;
}
.tab_content {
border: solid red 1px;
width: 148px;
height: 100px;
}
.tab_content div{
display: none;
}
.tab_content .block{
display: block;
}
.bgColor{
background-color: blue;
}
</style>
<script>
window.onload = function(){
var tab_head = document.getElementsByClassName("tab_head")[0];
var tabs = tab_head.getElementsByTagName("button");//button数组
var tab_content = document.getElementsByClassName("tab_content")[0];
var contents = tab_content.getElementsByTagName("div");//content数组
for (var i=0;i<tabs.length;i++){
tabs[i].onclick = function (){
for(var j=0;j<tabs.length;j++){
if(tabs[j] == this){
tabs[j].className = ‘bgColor‘;
contents[j].className = ‘block‘;
}
else {
tabs[j].className = ‘‘;
contents[j].className = ‘‘;
}
}
}
}




}
</script>
</head>
<body>
<div class="tab_head">
<button class="bgColor">tab1</button>
<button>tab2</button>
<button>tab3</button>
</div>
<div class="tab_content">
<div class="block">content1</div>
<div>content2</div>
<div>content3</div>
</div>

</body>
</html>

tab菜单事件

原文:http://www.cnblogs.com/R-jia-bao/p/6147903.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!