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

网络编程 2025/5/26 佚名

3 2 1

幽灵资源网 Design By www.bzswh.com

从大学开始就一直对ＪＳ很感兴趣，可是却很少实际操作，今天练练，试写一个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 <style type="text/css">  </style> </head> <body>      <h1 onmouseover="changTab(this)"> 选项卡[1] </h1>     <h1 onmousemove="changTab(this)"> 选项卡[2] </h1>     <h1 onmouseover="changTab(this)"> 选项卡[3] </h1>     <h1 onmousemove="changTab(this)"> 选项卡[4] </h1>     1经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。     2门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区     3经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。     4门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区  </body> </html>

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

js,选项卡,tab,效果

标签：

js,选项卡,tab,效果

幽灵资源网 Design By www.bzswh.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

幽灵资源网 Design By www.bzswh.com

评论“表现、结构、行为分离的选项卡效果”

暂无评论...

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

js,选项卡,tab,效果

用JavaScript 判断用户使用的是 IE6 还是 IE7

javascript 实现的多浏览器支持的贪吃蛇webgame

评论“表现、结构、行为分离的选项卡效果”

友情链接