JS Tap标签切换
源代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<script type="text/javascript">
function load() { //如果javascript代码放在<head></head>中，要加onload,在页面加载后调用函数
var lis = document.getElementsByTagName("li");
var divs = document.getElementById('tab_con').getElementsByTagName("div");
for(var i=0;i<lis.length;i++){
lis[i].onclick = function() {
for(var i=0; i<lis.length;i++){
if(this==lis[i]){
lis[i].className="select";
divs[i].className="show";
}else{
lis[i].className="";
divs[i].className="";
}
}
}
}
}
</script>
<style type="text/css">
ul,li,div
{
padding: 0px;
margin: 0px;
}
ul li
{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #fff;
border: 1px #bbb solid;
border-bottom: none;
}
ul li.select
{
background: #ccc;
color: red;
}
ul
{
overflow: hidden;
zoom:1;
list-style-type: none;
}
#tab_con
{
width: 406px;
height: 200px;
}
#tab_con div
{
width: 406px;
height: 200px;
display: none;
border:1px #bbb solid;
border-top: none;
}
#tab_con div.show
{
display: block;
background-color: #ccc;
}
</style>
</head>
<body onload="load( )">
<ul id="tab-nav">
<li class="select">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
<div id="tab_con">
<div class="show" >aaaa</div>
<div>bbbb</div>
<div>cccc</div>
<div>dddd</div>
</div>
</body>
</html>
