文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

首页 > web前端 > js教程 > 正文

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

php中文网

发布： 2016-05-16 19:08:09

原创

1199人浏览过

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

<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>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</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需刷新才能执行]

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：超个性的导航效果_导航菜单下一篇：javascript 如何生成不重复的随机数_javascript技巧

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

js怎样实现长按事件监听长按事件实现的4种解决方案实现JavaScript长按事件监听的核心在于模拟，1.使用基础定时器方案结合mousedown/touchstart和mouseup/touchend事件配合setTimeout控制定时触发；2.为解决移动端滑动干扰，需添加touchmove监听并判断移动距离是否超出阈值；3.可使用PointerEventsAPI统一处理跨平台输入；4.也可借助第三方库如Hammer.js实现高级手势识别；5.长按触发时间一般设为300-1000毫秒，需根据用户体验调整；6.防止重复触发可通过标志位控制；7.

2025-06-18 16:42:02

984

js中多个条件需要轮询判断怎么写轮询判断多个条件的核心是使用定时器结合异步操作以避免阻塞主线程。首先，定义异步的条件判断函数，其次使用setInterval或requestAnimationFrame创建定时器，在回调中依次检查条件，若全部满足则执行操作并停止定时器，否则继续轮询。此外，应设置超时机制防止无限轮询。轮询频率需在响应速度与资源消耗间平衡，过高会增加负载，过低影响响应及时性。避免死循环的关键在于合理退出机制，如最大次数限制、异常处理等。轮询适用于实时性要求不高且服务器不支持WebSocket的场景，而WebSock

2025-06-18 16:03:01

934

js怎样实现代码高亮功能代码高亮显示的4种实现方案代码高亮的实现方案主要有四种，分别是使用现成库、在线服务、自行编写逻辑和借助Markdown解析器。使用现成库如Prism.js、Highlight.js或CodeMirror是最常见的方式，它们支持多语言且配置简便，但会增加页面体积；在线服务无需引入库但依赖网络连接；自行实现适合有特殊需求者，但开发成本高；Markdown解析器方便快捷但灵活性较差。选择时应考虑支持的语言、体积、易用性、可定制性和社区活跃度，其中Prism.js和Highlight.js是热门选择，CodeMirror更适合在

2025-06-18 14:51:01

218

js怎么检测浏览器类型 js检测浏览器类型的5种方法汇总在JavaScript中检测浏览器类型最推荐的方法是使用特性检测。1.特性检测通过判断浏览器是否支持特定API，如if('geolocation'innavigator)；2.避免直接依赖userAgent，因其易被篡改且格式不统一；3.可辅助使用navigator.vendor和navigator.platform判断供应商和操作系统；4.使用第三方库如bowser可提高可靠性；5.处理兼容性问题应优先编写标准代码并提供polyfill备选方案；6.除浏览器类型外还需考虑版本、设备类型、分辨率

2025-06-18 14:48:02

457

js如何生成二维码图片前端生成二维码的3种简单方法前端生成二维码的方法是利用JavaScript库将数据转换为二维码图片，具体步骤包括：1.选择合适的库如qrcodejs2；2.引入库文件到HTML页面；3.编写代码创建QRCode对象并配置参数；4.渲染二维码到指定DOM元素。前端生成的优势在于减轻服务器压力、提升效率，并支持动态内容更新。然而需注意安全风险，如敏感信息暴露和库漏洞，建议重要场景在后端生成并加密。性能优化可通过选用轻量库、合理设置参数、缓存图片及使用WebWorkers实现。

2025-06-18 11:51:02

737

js如何监听窗口滚动事件滚动事件监听的3种实现方式滚动事件监听有3种实现方式：第一，直接使用window.onscroll赋值函数，但会覆盖原有监听器；第二，使用window.addEventListener添加多个监听器，灵活性更高；第三，结合节流或防抖优化性能，控制高频触发。此外，判断滚动方向需记录上次位置并与当前比较；优化方面包括减少DOM操作、使用requestAnimationFrame及缓存计算结果；移动端需注意触屏滚动、惯性滚动及视口变化影响。掌握这些方法可提升页面响应效率与用户体验。

2025-06-18 10:42:02

416

js如何实现声纹识别语音生物特征识别技术实现 JavaScript实现声纹识别是可行的，但具有挑战性。首先利用WebAudioAPI进行音频采集；其次通过MFCC算法提取声纹特征，可借助WASM或第三方库完成；接着根据验证或识别需求选择存储特征或训练模型；最后通过距离计算或模型预测完成比对。由于浏览器端计算资源受限、高质量库缺乏及隐私问题，实际开发中需权衡性能与安全，并考虑结合云端API提升效果。

2025-06-18 09:30:02

452

js如何实现数据验证规则 4种验证方案确保表单数据准确 JS数据验证方案选择取决于项目复杂度和技术栈。1.原生JS手动验证通过if语句和正则表达式实现，灵活性高但代码量大；2.HTML5内置验证使用required、pattern等属性快速实现简单验证，但自定义程度低；3.第三方库如jQueryValidationPlugin、Validator.js提供丰富规则和易用API，简化代码但引入额外依赖；4.响应式框架如React结合Formik或Vue结合VeeValidate可实现复杂验证逻辑。HTML5验证不足在于无法自定义错误提示、实现复杂逻辑及

2025-06-18 08:12:02

871

js怎样实现页面返回确认 js页面返回确认弹窗的2种实现方式页面返回确认的实现主要有两种方式：1.利用window.onbeforeunload事件；2.使用浏览器的historyAPI。window.onbeforeunload是最简单的方法，通过返回提示信息询问用户是否离开，但不同浏览器兼容性不同，部分浏览器可能忽略自定义提示；historyAPI则通过监听popstate事件并结合pushState控制历史记录，允许更精细的控制页面离开行为。在Vue中可通过混入封装相关逻辑，在组件挂载时添加事件监听并在销毁时移除；React可使用useEffect

2025-06-18 08:03:02

442

js怎样实现长按事件移动端长按触发自定义功能实现移动端长按事件的核心方法是监听touchstart、touchmove和touchend事件，并通过setTimeout和clearTimeout控制触发时机；1.在touchstart中记录起始时间并设置定时器；2.在touchmove中判断移动距离，若超出阈值则清除定时器以避免误触；3.在touchend中判断时间差，决定触发长按或短按；优化体验可通过调整长按阈值、使用requestAnimationFrame提高精度及加入移动容错范围来减少误判；在React或Vue等框架中，可结合状态

2025-06-17 23:36:02

576

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

ThinkPHP5快速开发企业站点[全程实录]

399697次学习
收藏
PHP Workerman 基础与实战：即时通讯聊天系统（ThinkPHP6）

51397次学习
收藏
Thinkphp3.2.3个人博客开发

212769次学习
收藏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP中文网抖音号: 发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部