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

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

Javascript: JQuery 学习笔记选择器之四; JQuery 学习笔记选择器之五; JQuery 学习笔记选择器之六; JQuery CSS样式控制学习笔记; 用js模仿word格式刷功能实现代码 [推荐]; 运用jquery实现table单双行不同显示并能单行选中; jqPlot jquery的页面图表绘制工具; jquery tools之tabs 选项卡/页签; jquery tools之tooltip; 浅析Javascript原型继承推荐; JQuery UI皮肤定制; 实现lightBox时的样式与行为分离减少JS; JQuery 表格操作(交替显示、拖动表格行、选择行等); javascript 进度条实现代码; Javascript this指针; jquery imgareaselect 使用利用js与程序结合实现图片剪切; javascript 写的一个简单的timer; javascript 处理HTML元素必须避免使用的一种方法; Javascript 验证上传图片大小[客户端]; jQuery 隔行换色支持键盘上下键，按Enter选定值

No. « ‹ 223 224 225 226 › »

技术文章搜索

关键字

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

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

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