实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javaScript-tab切换-学号:56090</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
li{list-style: none;}
.clear{clear: both;}
.tab{
width: 600px;
height: 300px;
margin: 50px auto;
}
#tab_list{
height: 40px;
line-height: 40px;
text-align: center;
font-family: '微软雅黑';
border-bottom: none;
}
#tab_list li{
float: left;
border: 1px solid #000;
border-right: none;
width: 100px;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
z-index: 999;
cursor: pointer;
}
#tab_list li:last-of-type{
border-right:1px solid #000;
}
#tab_content li{
width: 600px;
height: 300px;
border:1px solid #000;
text-align: center;
line-height: 300px;
margin-top: -2px;
}
</style>
</head>
<body>
<div class="tab">
<ul id="tab_list">
<li onclick="getTab(0);"style="background: #dbd0d6; border-bottom: none;">tab1</li>
<li onclick="getTab(1);" style="background: #ccc;">tab2</li>
<li onclick="getTab(2);" style="background: #ccc;">tab3</li>
<li onclick="getTab(3);" style="background: #ccc;">tab4</li>
</ul>
<div class="clear"></div>
<ul id="tab_content">
<li style="background: #dbd0d6;">我是tab1的内容</li>
<li style="display: none;background-color: burlywood;">我是tab2的内容</li>
<li style="display: none;background-color: mediumaquamarine;">我是tab3的内容</li>
<li style="display: none;background-color: cornflowerblue;">我是tab4的内容</li>
</ul>
<div class="clear"></div>
</div>
<script type="text/javascript">
function getTab(num){
var colorArr=new Array("#dbd0d6","burlywood","mediumaquamarine","cornflowerblue");
var tab=document.getElementById('tab_list');
var tab_list=tab.getElementsByTagName('li');
var content=document.getElementById('tab_content');
var content_list=content.getElementsByTagName('li');
for(var i=0; i<content_list.length;i++){document.getElementById
content_list[i].style.display="none";
}tab_content
content_list[num].style.display="block";
content_list[num].style.background=colorArr[num];
for(var i=0;i<tab_list.length;i++){
tab_list[i].style.background="#ccc";
tab_list[i].style.borderBottom="1px solid #000";
}
tab_list[num].style.background=colorArr[num];
tab_list[num].style.borderBottom="none";
//"1px solid "+colorArr[num];
}
</script>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例运行实例 »
点击 "运行实例" 按钮查看在线实例
