页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容表现、结构、行为分离的选项卡效果

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

发布：dxy 字体：[增加减小] 类型：转载

从大学开始就一直对ＪＳ很感兴趣，可是却很少实际操作，今天练练，试写一个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.jb51.net表现、结构、行为分离的选项卡效果 脚本之家</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 全选提示:你可先修改部分代码,再按运行]

Tags：js 选项卡 tab 效果

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：javascript 实现的多浏览器支持的贪吃蛇webgame
下一篇文章：javascript同步Import,同步调用外部js的方法

·在百度中搜索关于“表现、结构、行为分离的选项卡效果”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

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

文章评论

同类文章

最近更新

热点排行

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

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行