javascript实现表现、结构、行为分离的选项卡效果！

2016-02-19 10:00 5 1 收藏

只要你有一台电脑或者手机，都能关注图老师为大家精心推荐的javascript实现表现、结构、行为分离的选项卡效果！，手机电脑控们准备好了吗？一起看过来吧！

【 tulaoshi.com - Web开发】

其特点是扩展方便，只要自己添加标题和内容即可，自动初始化。

<!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>无标题文档</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 <style type="text/css">  </style> </head> <body>   选项卡[1]   选项卡[2]   选项卡[3]   选项卡[4]  1经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。 2门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区 3经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。 4门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区  </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

来源:https://www.tulaoshi.com/n/20160219/1592964.html

上一篇： SQL2008中SQL应用之－锁定(locking) 应用分析
下一篇：如何快速卸载Win8应用

看过《javascript实现表现、结构、行为分离的选项卡效果！》的人还看了以下文章更多>>

网页选项卡设计宽度的猜想

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

从网页选项卡诞生的那一天起，凭借其紧凑的布局和方便的切换方式，就成为各大门户必用的设计元素。让我们来看看这些五花八门的选项卡吧规则的宽度–比如150px、300px合适的选项卡数量：2个、4个使这些选项卡都恰好能平分宽度，在各大浏览器中完美呈现。忽然有一天，当你的网站需要移植到iPhone，或是其他移动设备上，你得在一个...

div css在思路和流程上实现结构与表现的分离

标签： Web开发

内容与表现分离，从标准到国人重视那天起，就已经讨论了，但是停留在div cssxhtml css纯代码的分离，思想上流程上，到底如何分离？古老的话题：一首古诗的分离 1.给你一首古诗，保存为毫无格式的一堆文字，你去理解它的内容，进行结构的处理。用word排版之后，他有了结构 2.这个结构其实包含了语义和表现 3.用html进行结构化，抛开...

PowerPoint怎样重设选项卡的名称

PowerPoint怎样重设选项卡的名称 ①启动PowerPoint2013，鼠标右击选项卡，点击自定义功能区。 ②在右侧主选项卡中右击你要重新定义名称的那一项，选择重命名。 ③弹出一个命名框，输入名称。 ④确定，返回到主界面，可以看到我将开始选项卡改为了Start，大家可以按照此方法完成修改。 PowerPoint快速应...

div+css在思路和流程上实现结构与表现的分离

标签： Web开发

内容与表现分离，从标准到国人重视那天起，就已经讨论了，但是停留在div+css xhtml+css 纯代码的分离，思想上流程上，到底如何分离？古老的话题：一首古诗的分离 1.给你一首古诗，保存为毫无格式的一堆文字，你去理解它的内容，进行结构的处理。用word排版之后，他有了结构 2.这个结构其实包含了语义和表现 3....

IE8里如何打开新选项卡时自动切换到新选项卡

标签：浏览器

IE8里如何打开新选项卡时自动切换到新选项卡操作步骤: 在用 Internet Explorer 7 和 Internet Explorer 8 以及更新版本的IE时，我们把一个链接在新选项卡中打开，但总是希望直接切换到新选项卡，而不是停留在当前选项卡。这个怎么操作? 在 IE 里面，点开工具菜单 - 点 Internet 选项。(如果没有出现菜单栏，则按 ALT 键...

查看更多精彩>>