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

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

Javascript: QQ邮箱的一个文本编辑器代码; Z-Blog中用到的js代码; 绝对经典的滑轮新闻显示(javascript+css)实现; 用js实现的仿sohu博客更换页面风格（简单版）; 仿Vista进程条效果; 用Javascript判断图片是否存在，不存在则显示默认图片的代码; 用JQuery 实现的自定义对话框; jQuery使用手册之三 CSS操作; 利用Dojo和JSON建立无限级AJAX动态加载的功能模块树; 贴图转换+转贴工具用到的js代码超级推荐; 超级简单的图片防盗(HTML),好用; 现代 javscript 编程资料; 超级可爱纯js网页时钟; Dojo之路:如何利用Dojo实现Drag and Drop效果; AJAX架构之Dojo篇; 发两个小东西，ASP/PHP 学习工具。用JavaScript写的; 使用prototype.js 的时候应该特别注意的几个问题.; 一个已封装好的漂亮进度条; 漂亮的widgets，支持换肤和后期开发新皮肤; 用javascript实现的仿Flash广告图片轮换效果

No. « ‹ 203 204 205 206 › »

技术文章搜索

关键字

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

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

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