一个简单的javascript Tab选项卡切换控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.tabBox{ width:200px; height:200px; border:1px solid #ccc;}
.tab{ color:#00F}
.on{ color:#F00; font-weight:bold}
.panel{}
.none{display:none}
</style>
</head>
<body>
<div class="tabBox">
<ul id="tabs">
<li class="tab on"><a href="#">A</a></li>
<li class="tab"><a href="#">B</a></li>
<li class="tab"><a href="#">C</a></li>
</ul>
<div id="panels">
<div class="panel">T_A</div>
<div class="panel none">T_B</div>
<div class="panel none">T_C</div>
</div>
</div>
<script type="text/javascript">
(function(){
function TabView() {
this.tabs = [];
this.panels = [];
this.eventName = "";
}
TabView.prototype.init = function (eventName,onFocusClassName){
var tabs = this.tabs;
var panels = this.panels;
eventName = eventName || "mouseover";
for(var i=0; i<tabs.length; i++)
{
tabs[i].key = i
tabs[i]["on"+eventName] = function(){
//clear tabs
for(var j = 0; j<tabs.length;j++)
{
tabs[j].className = tabs[j].className.replace(eval("/ ?"+onFocusClassName+" ?/"),"");
}
//clear panels
for(var j =0 ;j<panels.length;j++){
panels[j].style.display = "none";
}
//set
this.className += " "+ onFocusClassName;
panels[this.key].style.display = "block"
}
}
}
window.TabView = TabView;
})();
var test = new TabView();
test.tabs = document.getElementById("tabs").getElementsByTagName("li");
test.panels = document.getElementById("panels").getElementsByTagName("div");
test.init("click","on");
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.tabBox{ width:200px; height:200px; border:1px solid #ccc;}
.tab{ color:#00F}
.on{ color:#F00; font-weight:bold}
.panel{}
.none{display:none}
</style>
</head>
<body>
<div class="tabBox">
<ul id="tabs">
<li class="tab on"><a href="#">A</a></li>
<li class="tab"><a href="#">B</a></li>
<li class="tab"><a href="#">C</a></li>
</ul>
<div id="panels">
<div class="panel">T_A</div>
<div class="panel none">T_B</div>
<div class="panel none">T_C</div>
</div>
</div>
<script type="text/javascript">
(function(){
function TabView() {
this.tabs = [];
this.panels = [];
this.eventName = "";
}
TabView.prototype.init = function (eventName,onFocusClassName){
var tabs = this.tabs;
var panels = this.panels;
eventName = eventName || "mouseover";
for(var i=0; i<tabs.length; i++)
{
tabs[i].key = i
tabs[i]["on"+eventName] = function(){
//clear tabs
for(var j = 0; j<tabs.length;j++)
{
tabs[j].className = tabs[j].className.replace(eval("/ ?"+onFocusClassName+" ?/"),"");
}
//clear panels
for(var j =0 ;j<panels.length;j++){
panels[j].style.display = "none";
}
//set
this.className += " "+ onFocusClassName;
panels[this.key].style.display = "block"
}
}
}
window.TabView = TabView;
})();
var test = new TabView();
test.tabs = document.getElementById("tabs").getElementsByTagName("li");
test.panels = document.getElementById("panels").getElementsByTagName("div");
test.init("click","on");
</script>
</body>
</html>
