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

发布时间：2007-05-07　作者：　来源：转载

标签：雪佛兰通用奢华劳斯莱斯旗舰版 64位收藏夹解调器

其特点是扩展方便，只要自己添加标题和内容即可，自动初始化。无标题文档window.onload=resetTab;functiongetTabTitle(tab){varchildNodesList=tab.childNodes;vartitleNodes=newArray();varj=0;vari;for(i=0;i

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

<!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"> 
<!-- 
 body { 
  margin:50px; 
  padding: 0px; 
   
 } 
 .tabs { 
  width:auto; 
  height:auto; 
  border: 0px solid red; 
 } 
 .selectTab,.unselectTab { 
  border:1px solid #BDDFF9; 
  border-bottom-width: 0; 
  width:150px; 
  height:23px; 
  line-height:23px; 
  vertical-align: middle; 
  text-align:center; 
  background-color:#37709B; 
  margin: 0; 
  margin-right: 18px; 
  font-weight:bold; 
  font-size:14px; 
  color:#FFF; 
  cursor: pointer; 
  float:left; 
 } 
 .unselectTab { 
  color:#37709B; 
  background-color: white; 
 } 
.selectContent { 
    border-top: 5px #37709b solid; 
    padding-top: 8px; 
    clear: both; 
 } 
 .unselectContent { 
     display: none; 
 }

--> 
</style> 
</head> 
<body> 
 
    <h1 onmouseover="changTab(this)"> 选项卡[1] </h1> 
    <h1 onmousemove="changTab(this)"> 选项卡[2] </h1> 
    <h1 onmouseover="changTab(this)"> 选项卡[3] </h1> 
    <h1 onmousemove="changTab(this)"> 选项卡[4] </h1> 
    1经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。 
    2门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区 
    3经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。 
    4门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区 
 
</body> 
</html>

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

上一篇：用javascript实现图片马赛克后显示并切换

下一篇：又一个小巧的图片预加载类

广告商业广告，理性选择

网站首页

网络编程

数据库

操作系统

平面设计

网站运营

网络安全

电脑相关

手机学院

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

相关推荐

文章分类

热门关键词

热门文章

最新更新