表现、结构、行为分离的选项卡效果

更新时间：2008年01月19日 21:03:58 作者：

表现、结构、行为分离的选项卡效果

从大学开始就一直对ＪＳ很感兴趣，可是却很少实际操作，今天练练，试写一个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=gb2312" /> <title>www.jb51.net表现、结构、行为分离的选项卡效果 脚本之家</title> <script language="javascript">     window.onload=resetTab;     function getTabTitle(tab) {         var childNodesList=tab.childNodes;         var titleNodes=new Array();         var j=0;         var i;         for (i=0;i<childNodesList.length;i++) {             if(childNodesList[i].nodeName=="H1") {                 titleNodes[j]=childNodesList[i];                 j++;             }         }         return titleNodes;     }     function getTabContent(tab) {         var childNodesList=tab.childNodes;         var tabContent=new Array();         var j=0;         var i;         for (i=0;i<childNodesList.length;i++) {             if(childNodesList[i].nodeName=="DIV") {                 tabContent[j]=childNodesList[i];                 j++;             }         }         return tabContent;     }     function resetTab() {         var allDiv=document.getElementsByTagName("div");         var tab=new Array();         var j=0;         var i;         for (i=0;i<allDiv.length;i++) {             if(allDiv[i].className=="tabs") {                 tab[j]=allDiv[i];                 j++;             }         }         var tabTitle,tabContent;         for(i=0;i<tab.length;i++) {             tabTitle=getTabTitle(tab[i]);             tabTitle[0].className="selectTab";             tabContent=getTabContent(tab[i]);             tabContent[0].className="selectContent";             for (j=1;j<tabTitle.length;j++) {                 tabTitle[j].className="unselectTab";                 tabContent[j].className="unselectContent";             }         }     }     function changTab(tab) {         var tabTitle,tabContent,i;         if(tab.className!="selectTab") {             tabTitle=getTabTitle(tab.parentNode);             tabContent=getTabContent(tab.parentNode);             for(i=0;i<tabTitle.length;i++) {                 if(tabTitle[i].className=="selectTab") {                     tabTitle[i].className="unselectTab";                 }                 if(tabContent[i].className=="selectContent") {                     tabContent[i].className="unselectContent";                 }             }         tab.className="selectTab";         for(i=0;i<tabTitle.length;i++) {             if(tabTitle[i].className=="selectTab") {                 tabContent[i].className="selectContent";                 break;             }         }         }     }                                                 </script> <style type="text/css">  </style> </head> <body> <div class="tabs">     <h1 onmouseover="changTab(this)"> 选项卡[1] </h1>     <h1 onmousemove="changTab(this)"> 选项卡[2] </h1>     <h1 onmouseover="changTab(this)"> 选项卡[3] </h1>     <h1 onmousemove="changTab(this)"> 选项卡[4] </h1>     <div>1经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。</div>     <div>2门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区</div>     <div>3经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。</div>     <div>4门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区</div> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

JavaScript私有变量实例详解
这篇文章主要介绍了JavaScript私有变量,结合实例形式分析了javascript私有变量的常见定义及访问方法,需要的朋友可以参考下
2019-01-01
JavaScript中如何计算字符串文本的宽度
这篇文章主要介绍了JavaScript中如何计算字符串文本的宽度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
WebView启动支付宝客户端支付失败的问题小结
这篇文章主要介绍了WebView启动支付宝客户端支付失败的问题小结的相关资料,需要的朋友可以参考下
2017-01-01
javascript url几种编码方式详解
下面小编就为大家带来一篇javascript url几种编码方式详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
一个Action如何调用两个不同的方法
这篇文章主要介绍了一个Action如何调用两个不同的方法,需要的朋友可以参考下
2014-05-05
深入了解TypeScript中常用类型的使用
javaScript 有三个经常会使用到的原始类型：stirng，number,boolean。每一个在Typescript都有一个相对应的类型。本文就来聊聊TypeScript中这些常用类型的使用，感兴趣的可以了解一下
2022-09-09
javaScript把其它类型转换为Number类型
在本篇文章里小编给大家整理的是关于javaScript把其它类型转换为Number类型的相关文章，有需要的朋友们学习下。
2019-10-10
微信小程序flex-grow无效的解决方案
在微信小程序中使用 Flexbox 布局时,如果遇到 flex-grow 属性无效的情况,可能是由几个不同的原因导致的,以下是一些可能的原因和解决方案,感兴趣的朋友一起看看吧
2024-08-08
JavaScript 异常处理详解
这篇文章主要介绍了JavaScript 异常处理详解,需要的朋友可以参考下
2015-02-02
js实现金山打字通小游戏
这篇文章为大家详细主要介绍了js实现金山打字通小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-07-07

表现、结构、行为分离的选项卡效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具