Home > Article > Web Front-end > A good web page tab_navigation menu implemented with javascript

A good web page tab_navigation menu implemented with javascript

WBOYOriginal: 2016-05-16 19:08:091004browse

This tab effect is a good tab effect I have ever seen. It is not the best, but it is also very good

<div id="warp">
<div class="domtab doprevnext">
    <ul class="domtabs">
        <li>
            <a href="#tab1"></a>PHP/MySQL</li>
<li>
            <a href="#tab2"></a>(X)HTML/CSS</li>
<li>
            <a href="#tab3"></a>Javascript</li>
<li>
            <a href="#tab4"></a>Ajax</li>
</ul>
        <h2 class="title">
        </h2>Homr.cn - DIV CSS snippet of essence code
        <div>
        <h2>
            <a name="tab1" id="tab1"></a>PHP</h2>
<p>
            </p>PHP ("PHP: Hypertext Preprocessor", abbreviation for Hypertext Preprocessor) is a widely used open source multi-purpose scripting language that can be embedded into HTML and is especially suitable for web development. <h2>
            <a name="mysql"></a>MySQL</h2>
<p>
            </p>MySQL is the most popular open source SQL database management system, which is developed, released and supported by MySQL AB. MySQL AB is a commercial company founded by several MySQL developers. It is a second-generation open source company that combines open source values, methods and successful business models. <p>
            <a href="#top"></a>back to menu</p>
</div>
        
        <div>
        <h2>
            <a name="tab2" id="tab2"></a>(X)HTML</h2>
<p>
            </p>HTML language is a tool for us to build web pages. From its emergence to the present, its specifications have been continuously improved and its functions have become more and more powerful. However, there are still flaws and shortcomings, and people are still constantly improving it to make it more controllable and flexible to adapt to the ever-changing application requirements on the network. At the end of 2000, the international W3C (World Wide Web Consortium) organization announced the release of XHTML version 1.0. <p>
            </p>XHTML 1.0 is a new language optimized and improved on the basis of HTML 4.0, aiming at XML-based applications. XHTML is an enhanced HTML, and its scalability and flexibility will adapt to more needs of future network applications. <h2>
            <a name="css"></a>CSS</h2>
<p>
            </p>CSS is the abbreviation of Cascading Style Sheet. Translated as "Cascading Style Sheets". Is a markup language used for (enhanced) control over web page styles and allows the separation of style information from web page content. <p>
            <a href="#top"></a>back to menu</p>
</div>
        
        <div>
        <h2>
            <a name="tab3" id="tab3"></a>Javascript</h2>
<p>
            </p>JavaScript is a new description language that can be embedded in HTML documents. Through JavaScript, it is possible to respond to user demand events (such as form input) without transmitting data back and forth over any network. Therefore, when a user enters a piece of data, it does not need to be passed to the server. ) processing and then passing it back can be directly processed by the client application. <p>
            <a href="#top"></a>back to menu</p>
</div>
        <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>
            <h2><a name="tab4" id="tab4">Ajax</a></h2>
            <p>AJAX (Asynchronous JavaScript and XML, Asynchronous JavaScript and XML technology) is a new word, but its connotation is two JavaScript features that have been around for some time. These two functions have been ignored in the past. They became famous after the emergence of Gmail, Google suggest and Google Maps. </p>
            <p>The two JavaScript features are:
                </p>
<ul>
                    <li>Send a request to the server without re-reading the page </li>
                    <li>Parse and use XML files</li>
                </ul>
            
            <p><a href="#top">back to menu</a></p>
        </div>
    </div>
</div>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Super personalized navigation effect_navigation menuNext article：Super personalized navigation effect_navigation menu

See more

A good web page tab_navigation menu implemented with javascript

Related articles