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

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

Javascript: JavaScript事件驱动及事件处理; JavaScript教程：JavaScript函数; JavaScript程序控制流; JavaScript制作滚动文本效果; JavaScript教程：表达式和运算符; JavaScript教程：基本数据类型; JavaScript教程：网页中加入JavaScript; JavaScript教程:编写一个简单的JavaScript程序; JavaScript教程:JavaScript程序运行环境; JavaScript教程:JavaScript和Java的区别; JavaScript教程：什么是JavaScript？; JavaScript教程：对象的基础知识; JavaScript教程:JS的语句及语法; JavaScript教程:常用对象的属性和方法; JavaScript教程:基于对象的JS语言范例; JavaScript教程:对象的定义; JavaScript教程:创建对象实例; JavaScript教程:对象方法的使用; JavaScript教程:JavaScript中的数组; JavaScript教程:JS中创建新对象范例

No. « ‹ 159 160 161 162 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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 中的表现、结构、行为分离的选项卡效果