当前位置：Gxlcms > JavaScript > 用javascript实现的不错的一款网页选项卡_导航菜单

用javascript实现的不错的一款网页选项卡_导航菜单

时间：2021-07-01 10:21:17 帮助过：4人阅读

这款选项卡效果，是我见过的一个不错的选项卡效果，不是最好，也是很好的

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>Javascript 标签页（TAB）浏览控件推介之：DOMTab - javascript, DOMTab, TAB, 标签页, </title> 
<style type="text/css"> 
 
</style> 
<script> 
/* 
    DOMtab Version 3.1415927 
    Updated March the First 2006 
    written by Christian Heilmann 
    check blog for updates: http://www.wait-till-i.com     
    free to use, not free to resell 
*/ 
domtab={ 
    tabClass:'domtab', // class to trigger tabbing 
    listClass:'domtabs', // class of the menus 
    activeClass:'active', // class of current link 
    contentElements:'div', // elements to loop through 
    backToLinks:/#top/, // pattern to check "back to top" links 
    printID:'domtabprintview', // id of the print all link 
    showAllLinkText:'show all content', // text for the print all link 
    prevNextIndicator:'doprevnext', // class to trigger prev and next links 
    prevNextClass:'prevnext', // class of the prev and next list 
    prevLabel:'previous', // HTML content of the prev link 
    nextLabel:'next', // HTML content of the next link 
    prevClass:'prev', // class for the prev link 
    nextClass:'next', // class for the next link 
    init:function(){ 
        var temp; 
        if(!document.getElementById || !document.createTextNode){return;} 
        var tempelm=document.getElementsByTagName('div');         
        for(var i=0;i<tempelm.length;i++){ 
            if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;} 
            domtab.initTabMenu(tempelm[i]); 
            domtab.removeBackLinks(tempelm[i]); 
            if(domtab.cssjs('check',tempelm[i],domtab.prevNextIndicator)){ 
                domtab.addPrevNext(tempelm[i]); 
            } 
            domtab.checkURL(); 
        } 
        if(document.getElementById(domtab.printID)  
           && !document.getElementById(domtab.printID).getElementsByTagName('a')[0]){ 
            var newlink=document.createElement('a'); 
            newlink.setAttribute('href','#'); 
            domtab.addEvent(newlink,'click',domtab.showAll,false); 
            newlink.onclick=function(){return false;} // safari hack 
            newlink.appendChild(document.createTextNode(domtab.showAllLinkText)); 
            document.getElementById(domtab.printID).appendChild(newlink); 
        } 
    }, 
    checkURL:function(){ 
        var id; 
        var loc=window.location.toString(); 
        loc=/#/.test(loc)?loc.match(/#(\w.+)/)[1]:''; 
        if(loc==''){return;} 
        var elm=document.getElementById(loc); 
        if(!elm){return;} 
        var parentMenu=elm.parentNode.parentNode.parentNode; 
        parentMenu.currentSection=loc; 
        parentMenu.getElementsByTagName(domtab.contentElements)[0].style.display='none'; 
        domtab.cssjs('remove',parentMenu.getElementsByTagName('a')[0].parentNode,domtab.activeClass); 
        var links=parentMenu.getElementsByTagName('a'); 
        for(i=0;i 
<body> 
<div id="warp"> 
    <div class="domtab doprevnext"> 
        <ul class="domtabs"> 
            <li>PHP/MySQL</li> 
            <li>(X)HTML/CSS</li> 
            <li>Javascript</li> 
            <li>Ajax</li> 
        </ul> 
        <h2 class="title">Homr.cn - DIV+CSS小段精华代码</h2> 
         
        <div> 
            <h2>PHP</h2> 
            <p>PHP（"PHP: Hypertext Preprocessor"，超文本预处理器的字母缩写）是一种被广泛应用的开放源代码的多用途脚本语言，它可嵌入到 HTML中，尤其适合 web 开发。 </p> 
            <h2>MySQL</h2> 
            <p>MySQL是最流行的开放源码SQL数据库管理系统，它是由MySQL AB公司开发、发布并支持的。MySQL AB是由多名MySQL开发人创办的一家商业公司。它是一家第二代开放源码公司，结合了开放源码价值取向、方法和成功的商业模型。</p> 
            <p>back to menu</p> 
        </div> 
         
        <div> 
            <h2>(X)HTML</h2> 
            <p>HTML语言是我们建立网页的工具，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上日新月异的应用需求。2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。</p> 
            <p>XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。</p> 
            <h2>CSS</h2> 
            <p>CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</p> 
            <p>back to menu</p> 
        </div> 
         
        <div> 
            <h2>Javascript</h2> 
            <p>JavaScript 是一种新的描述语言，此一语言可以被嵌入 HTML 的文件之中。透过 JavaScript 可以做到回应使用者的需求事件 (如： form 的输入) 而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。</p> 
            <p>back to menu</p> 
        </div> 
         
        <div> 
            <h2>Ajax</h2> 
            <p>AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词，但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略，在 Gmail、Google suggest 及  Google Maps 出现后才一举成名天下知。</p> 
            <p>这两个 JavaScript 功能 是： 
                <ul> 
                    <li>在不重新读取页面的情况下对伺服器送出要求（request）</li> 
                    <li>解析、使用 XML 文件</li> 
                </ul> 
            </p> 
            <p>back to menu</p> 
        </div> 
    </div> 
</div> 
</body> 
</html>

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

用javascript实现的不错的一款网页选项卡_导航菜单

人气教程排行