一个简单的javascript Tab选项卡切换控件

发布者: spid 2010年05月25日围观次点赞:1

一个简单的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> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一个简单的javascript Tab选项卡切换控件</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="#" _fcksavedurl="#">A</a></li> <li class="tab"><a href="#" _fcksavedurl="#">B</a></li> <li class="tab"><a href="#" _fcksavedurl="#">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>
提示：您可以先修改部分代码再运行

顶(1)

踩(0)

【搜索相关内容】[打印] [关闭]

上一篇：JS获取checkbox的Text值

下一篇：javascript 异步调用后台.cs里的方法 Page

最新评论

一个简单的javascript Tab选项卡切换控件

您可能还会对下面的文章感兴趣：

相关文章