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

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

Javascript: 一定时间滚动的链接菜单效果; 超链接的陷下效果; 用js实现的打字效果的带链接的新闻标题; js实现的很酷的连接提示效果; 再谈IE中Flash控件的自动激活 ObjectWrap; 超级兔子让浮动层消失的前因后果; 在线编辑器的实现原理(兼容IE和FireFox); B/S开发中常用javaScript技术与代码; 用JavaScript事件串连执行多个处理过程的方法; Javascript中的Split使用方法与技巧; HTML在线编辑器的基本概念与相关资料; Js+DVML很酷漂亮实用的右键弹出菜单; 用js实现的比较经典实用的触发型导航菜单; js中slice()方法的使用说明; 基础的prototype.js常用函数及其用法; 常用限制input的方法的js代码; 又一个图片自动缩小的JS代码; JavaScript触发器详解; 理解Javascript的caller,callee,call,apply区别; 一个简单的日历代码 (For: FF1+ IE5+ Opr7+)测试

No. « ‹ 54 55 56 57 › »

技术文章搜索

关键字

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

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

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