用javascript实现在Tab标签之间切换,通过点击Tab标签,显示出对应的内容。
<!--
--function:用javascript实现几个Tab标签间的切换。
-- created by:少数派力量_Mole
--date:7/08/15
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html" charset="UTF-8">
<style type = "text/css">
ul {overflow:hidden; zoom:1; list-style-type:none; cursor:pointer;}<!--ul样式-->
p {font-size:30px; color:red; text-align:center;}
ul,li {padding:0px; margin:0px;}
ul li {float:right; width:100px; height:35px; line-height:35px;border:1px #bbb solid;
text-align:center; border-bottom:none; background:#ccc;}
ul li.fli {background:#fff; color:blue;}
#tab_con {width:600px; height:600px;}
#tab_con div {width:1024px; height:600px; background:#ccc; border:1px,#bbb; border-top:none;}
#tab_con div.fdiv {background:#fff;}
</style>
<script type="text/javascript">
window.οnlοad=function() //onload 事件句柄,文档装载结束时调用
{
var tabs=document.getElementById("tab").getElementsByTagName("li");
var divs=document.getElementById("tab_con").getElementsByTagName("div");
divs[0].style.display = "block"; //加载时显示第一个标签的内容
for(var i=0;i<tabs.length;i++){
tabs[i].οnclick=function(){//鼠标点击触发
for(var i=0;i<tabs.length;i++)
{
if(tabs[i]==this){
tabs[i].className="fli";//加载Tab样式
divs[i].className="fdiv";//加载相应区域的样式
divs[i].style.display = "block"; //使得对应点击标签的显示区域可见
}
else{
tabs[i].className="";
divs[i].className="";
divs[i].style.display = "none"; //使得其他区域不可见
}
}
}
}
}
</script>
<title>十六进制颜色值</title>
</head>
<body>
<ul id="tab">
<li class="fli">first</li>
<li>second</li>
<li>third</li>
</ul>
<div id="tab_con" align="center" >
<div class="fdiv" align="center">first area</div>
<div>second area</div>
<div>third area</div>
</div>
</body>
</html>
代码测试截图: