Heim >Web-Frontend >js-Tutorial >用javascript实现的不错的一款网页选项卡_导航菜单

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

WBOYOriginal: 2016-05-16 19:08:091026Durchsuche

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

<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: <a href="http://www.wait-till-i.com" target="_blank">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<links.length;i++){ 
            if(!links[i].getAttribute('href')){continue;} 
            if(!/#/.test(links[i].getAttribute('href').toString())){continue;} 
            id=links[i].href.match(/#(\w.+)/)[1]; 
            if(id==loc){ 
                var cur=links[i].parentNode.parentNode; 
                domtab.cssjs('add',links[i].parentNode,domtab.activeClass); 
                break; 
            } 
        } 
        domtab.changeTab(elm,1); 
        elm.focus(); 
        cur.currentLink=links[i]; 
        cur.currentSection=loc; 
    }, 
    showAll:function(e){ 
        document.getElementById(domtab.printID).parentNode.removeChild(document.getElementById(domtab.printID)); 
        var tempelm=document.getElementsByTagName('div');         
        for(var i=0;i<tempelm.length;i++){ 
            if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;} 
            var sec=tempelm[i].getElementsByTagName(domtab.contentElements); 
            for(var j=0;j<sec.length;j++){ 
                sec[j].style.display='block'; 
            } 
        } 
        var tempelm=document.getElementsByTagName('ul');         
        for(i=0;i<tempelm.length;i++){ 
            if(!domtab.cssjs('check',tempelm[i],domtab.prevNextClass)){continue;} 
            tempelm[i].parentNode.removeChild(tempelm[i]); 
            i--; 
        } 
        domtab.cancelClick(e); 
    }, 
    addPrevNext:function(menu){ 
        var temp; 
        var sections=menu.getElementsByTagName(domtab.contentElements); 
        for(var i=0;i<sections.length;i++){ 
            temp=domtab.createPrevNext(); 
            if(i==0){ 
                temp.removeChild(temp.getElementsByTagName('li')[0]); 
            } 
            if(i==sections.length-1){ 
                temp.removeChild(temp.getElementsByTagName('li')[1]); 
            } 
            temp.i=i; // h4xx0r! 
            temp.menu=menu; 
            sections[i].appendChild(temp); 
        } 
    }, 
    removeBackLinks:function(menu){ 
        var links=menu.getElementsByTagName('a'); 
        for(var i=0;i<links.length;i++){ 
            if(!domtab.backToLinks.test(links[i].href)){continue;} 
            links[i].parentNode.removeChild(links[i]); 
            i--; 
        } 
    }, 
    initTabMenu:function(menu){ 
        var id; 
        var lists=menu.getElementsByTagName('ul'); 
        for(var i=0;i<lists.length;i++){ 
            if(domtab.cssjs('check',lists[i],domtab.listClass)){ 
                var thismenu=lists[i]; 
                break; 
            } 
        } 
        if(!thismenu){return;} 
        thismenu.currentSection=''; 
        thismenu.currentLink=''; 
        var links=thismenu.getElementsByTagName('a'); 
        for(i=0;i<links.length;i++){ 
            if(!/#/.test(links[i].getAttribute('href').toString())){continue;} 
            id=links[i].href.match(/#(\w.+)/)[1]; 
            if(document.getElementById(id)){ 
                domtab.addEvent(links[i],'click',domtab.showTab,false); 
                links[i].onclick=function(){return false;} // safari hack 
                domtab.changeTab(document.getElementById(id),0); 
            } 
        } 
        id=links[0].href.match(/#(\w.+)/)[1]; 
        if(document.getElementById(id)){ 
            domtab.changeTab(document.getElementById(id),1); 
            thismenu.currentSection=id; 
            thismenu.currentLink=links[0]; 
            domtab.cssjs('add',links[0].parentNode,domtab.activeClass); 
        } 
    }, 
    createPrevNext:function(){ 
        // this would be so much easier with innerHTML, darn you standards fetish! 
        var temp=document.createElement('ul'); 
        temp.className=domtab.prevNextClass; 
        temp.appendChild(document.createElement('li')); 
        temp.getElementsByTagName('li')[0].appendChild(document.createElement('a')); 
        temp.getElementsByTagName('a')[0].setAttribute('href','#'); 
        temp.getElementsByTagName('a')[0].innerHTML=domtab.prevLabel; 
        temp.getElementsByTagName('li')[0].className=domtab.prevClass; 
        temp.appendChild(document.createElement('li')); 
        temp.getElementsByTagName('li')[1].appendChild(document.createElement('a')); 
        temp.getElementsByTagName('a')[1].setAttribute('href','#'); 
        temp.getElementsByTagName('a')[1].innerHTML=domtab.nextLabel; 
        temp.getElementsByTagName('li')[1].className=domtab.nextClass; 
        domtab.addEvent(temp.getElementsByTagName('a')[0],'click',domtab.navTabs,false); 
        domtab.addEvent(temp.getElementsByTagName('a')[1],'click',domtab.navTabs,false); 
        // safari fix 
        temp.getElementsByTagName('a')[0].onclick=function(){return false;} 
        temp.getElementsByTagName('a')[1].onclick=function(){return false;} 
        return temp; 
    }, 
    navTabs:function(e){ 
        var li=domtab.getTarget(e); 
        var menu=li.parentNode.parentNode.menu; 
        var count=li.parentNode.parentNode.i; 
        var section=menu.getElementsByTagName(domtab.contentElements); 
        var links=menu.getElementsByTagName('a'); 
        var othercount=(li.parentNode.className==domtab.prevClass)?count-1:count+1; 
        section[count].style.display='none'; 
        domtab.cssjs('remove',links[count].parentNode,domtab.activeClass); 
        section[othercount].style.display='block'; 
        domtab.cssjs('add',links[othercount].parentNode,domtab.activeClass); 
        var parent=links[count].parentNode.parentNode; 
        parent.currentLink=links[othercount]; 
        parent.currentSection=links[othercount].href.match(/#(\w.+)/)[1]; 
        domtab.cancelClick(e); 
    }, 
    changeTab:function(elm,state){ 
        do{ 
            elm=elm.parentNode; 
        } while(elm.nodeName.toLowerCase()!=domtab.contentElements) 
        elm.style.display=state==0?'none':'block'; 
    }, 
    showTab:function(e){ 
        var o=domtab.getTarget(e); 
        if(o.parentNode.parentNode.currentSection!=''){ 
            domtab.changeTab(document.getElementById(o.parentNode.parentNode.currentSection),0); 
            domtab.cssjs('remove',o.parentNode.parentNode.currentLink.parentNode,domtab.activeClass); 
        } 
        var id=o.href.match(/#(\w.+)/)[1]; 
        o.parentNode.parentNode.currentSection=id; 
        o.parentNode.parentNode.currentLink=o; 
        domtab.cssjs('add',o.parentNode,domtab.activeClass); 
        domtab.changeTab(document.getElementById(id),1); 
        document.getElementById(id).focus(); 
        domtab.cancelClick(e); 
    }, 
/* helper methods */ 
    getTarget:function(e){ 
        var target = window.event ? window.event.srcElement : e ? e.target : null; 
        if (!target){return false;} 
        if (target.nodeName.toLowerCase() != 'a'){target = target.parentNode;} 
        return target; 
    }, 
    cancelClick:function(e){ 
        if (window.event){ 
            window.event.cancelBubble = true; 
            window.event.returnValue = false; 
            return; 
        } 
        if (e){ 
            e.stopPropagation(); 
            e.preventDefault(); 
        } 
    }, 
    addEvent: function(elm, evType, fn, useCapture){ 
        if (elm.addEventListener)  
        { 
            elm.addEventListener(evType, fn, useCapture); 
            return true; 
        } else if (elm.attachEvent) { 
            var r = elm.attachEvent('on' + evType, fn); 
            return r; 
        } else { 
            elm['on' + evType] = fn; 
        } 
    }, 
    cssjs:function(a,o,c1,c2){ 
        switch (a){ 
            case 'swap': 
                o.className=!domtab.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2); 
            break; 
            case 'add': 
                if(!domtab.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;} 
            break; 
            case 'remove': 
                var rep=o.className.match(' '+c1)?' '+c1:c1; 
                o.className=o.className.replace(rep,''); 
            break; 
            case 'check': 
                var found=false; 
                var temparray=o.className.split(' '); 
                for(var i=0;i<temparray.length;i++){ 
                    if(temparray[i]==c1){found=true;} 
                } 
                return found; 
            break; 
        } 
    } 
} 
domtab.addEvent(window, 'load', domtab.init, false); 
</script> 
 
<div id="warp"> 
    <div class="domtab doprevnext"> 
        <ul class="domtabs"> 
            <li><a href="#tab1">PHP/MySQL</a></li> 
            <li><a href="#tab2">(X)HTML/CSS</a></li> 
            <li><a href="#tab3">Javascript</a></li> 
            <li><a href="#tab4">Ajax</a></li> 
        </ul> 
        <h2 class="title">Homr.cn - DIV+CSS小段精华代码</h2> 
         
        <div> 
            <h2><a name="tab1" id="tab1">PHP</a></h2> 
            <p>PHP（"PHP: Hypertext Preprocessor"，超文本预处理器的字母缩写）是一种被广泛应用的开放源代码的多用途脚本语言，它可嵌入到 HTML中，尤其适合 web 开发。 </p> 
            <h2><a name="mysql">MySQL</a></h2> 
            <p>MySQL是最流行的开放源码SQL数据库管理系统，它是由MySQL AB公司开发、发布并支持的。MySQL AB是由多名MySQL开发人创办的一家商业公司。它是一家第二代开放源码公司，结合了开放源码价值取向、方法和成功的商业模型。</p> 
            <p><a href="#top">back to menu</a></p> 
        </div> 
         
        <div> 
            <h2><a name="tab2" id="tab2">(X)HTML</a></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><a name="css">CSS</a></h2> 
            <p>CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</p> 
            <p><a href="#top">back to menu</a></p> 
        </div> 
         
        <div> 
            <h2><a name="tab3" id="tab3">Javascript</a></h2> 
            <p>JavaScript 是一种新的描述语言，此一语言可以被嵌入 HTML 的文件之中。透过 JavaScript 可以做到回应使用者的需求事件 (如： form 的输入) 而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。</p> 
            <p><a href="#top">back to menu</a></p> 
        </div> 
         
        <div> 
            <h2><a name="tab4" id="tab4">Ajax</a></h2> 
            <p>AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词，但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略，在 Gmail、Google suggest 及  Google Maps 出现后才一举成名天下知。</p> 
            <p>这两个 JavaScript 功能 是： 
                </p>
<ul> 
                    <li>在不重新读取页面的情况下对伺服器送出要求（request）</li> 
                    <li>解析、使用 XML 文件</li> 
                </ul> 
             
            <p><a href="#top">back to menu</a></p> 
        </div> 
    </div> 
</div>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：超个性的导航效果_导航菜单Nächster Artikel：javascript 如何生成不重复的随机数_javascript技巧

In Verbindung stehende Artikel

Mehr sehen