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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 表现、结构、行为分离的选项卡效果

Javascript: Prototype使用指南之form.js; Prototype1.5 rc2版指南最后一篇之Position; javascript 对象的定义方法; JS多级连动菜单; javascript编程起步（第一课）; javascript编程起步（第二课）; java script编程起步（第三课）; jquery简单体验; javascript编程起步（第四课）; javascript编程起步（第五课）; javascript编程起步（第六课）; javascript编程起步（第七课）; javascript object oriented 面向对象编程初步; js宝典学习笔记（上）; JS宝典学习笔记(下); javascript基础的动画教程，直观易懂; javascript 的面向对象特性参考; JScript|Event]面向事件驱动的编程(二)--实例讲解:将span模拟成超连接; JScript面向事件驱动的编程; 一份老外写的XMLHttpRequest代码多浏览器支持兼容性

No. « ‹ 42 43 44 45 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 205 ::

收藏到网摘: n/a

javascript 实现的多浏览器支持的贪吃蛇webgame 用JavaScript 判断用户使用的是 IE6 还是 IE7

从大学开始就一直对ＪＳ很感兴趣，可是却很少实际操作，今天练练，试写一个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.ruanchen.com表现、结构、行为分离的选项卡效果 软晨学习网</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 全选提示:你可先修改部分代码,再按运行]

javascript 实现的多浏览器支持的贪吃蛇webgame 用JavaScript 判断用户使用的是 IE6 还是 IE7

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

评论 (0) All

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