<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Customized Tab</title> <style type="text/css"> .tab{ margin-top:2px; color: #5A5A5A; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; font-weight: bold; background-color:#E6E6E6; display:inline-block; padding:5px; width:100px; text-align:center; overflow-x:visible; border-top:1px solid lightGrey; border-left:1px solid lightGrey; border-right:1px solid lightGrey; border-top-left-radius:8px; border-top-right-radius:8px; } .tab:hover{ border-top:1px solid #999; border-left:1px solid #999; border-right:1px solid #999; background-color:#DADADA; cursor:pointer; } #selected{ background-color:white; border-bottom:1px solid white; margin-bottom:-1px; } .tabs{ border: 1px solid #AAA; background: #CCC; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; margin-left:50px; margin-top:20px; width:500px; } .tabsContainer{ margin-left:50px; } </style> <script type="text/javascript"> window.onload=function(){ var divs=document.getElementsByTagName("div"); var tabs=[]; var tabsContainer=null; for(var i=0;i<divs.length;i++){ var div=divs[i]; if(div.className=="tab"){ tabs.push(div); } if(div.getAttribute("name")=="tabsContainer"){ tabsContainer=div; } } for(var i=0;i<tabs.length;i++){ var tab=tabs[i]; tab.onclick=function(){ var href=this.getAttribute("href"); for(var k=0;k<tabs.length;k++){ tabs[k].removeAttribute("id"); } this.setAttribute("id","selected"); for(var n=0;n<tabsContainer.childNodes.length;n++){ var childNode=tabsContainer.childNodes[n]; if(childNode.nodeType!=1){ continue; } if(childNode.getAttribute("name")==href){ childNode.style.display="block"; }else{ childNode.style.display="none"; } } }; } }; </script> </head> <body> <div class="tabs"> <div class="tab" href="tab1" title="tab1" id="selected">tab1</div> <div class="tab" href="tab2" title="tab2">tab2</div> <div class="tab" href="tab3" title="tab3">tab3</div> </div> <div name="tabsContainer" class="tabsContainer"> <div name="tab1" >This is content of tab1</div> <div name="tab2" style="display:none;">This is content of tab2</div> <div name="tab3" style="display:none;">This is content of tab3</div> </div> </body> </html>
相关推荐
JavaScript实现简易tab栏切换案例 本文实例为大家分享了JavaScript实现简易tab栏切换效果的具体代码,供大家参考,具体内容如下 tab栏分析 li里面的分析 js实现隐藏与显示 排他思想: 1)、所有元素全部清除...
JavaScript实现简易tab栏切换内容栏 本文实例为大家分享了JavaScript实现简易tab栏切换内容栏的具体代码,供大家参考,具体内容如下 html+css部分 <!DOCTYPE html> <html lang="en"> <head> ...
这个代码是用jQuery实现一个简单的tab切换功能,可以供前端开发者参考
两个简单tab切换 可用 适合新手学习
EasyIndicator一款简易tab 切换指示器,带平移动画效果,可适用于ViewPage或普通View下
jQuery简单tab选项卡切换代码
主要为大家详细介绍了JS实现简单tab选项卡切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
非常简单的tab切换,小白也能看得懂,非常精简的!
简单、易懂、易上手、易修改TAB选项卡。新手上路绝技实例。
这是一个完整的web前端小项目,可以实现多张图片在网页上自动轮放。本人初学前端时写的小东西,不喜勿喷。如果是前端大神没必要下载。
web开发中,简单Tab页的实现
简单Tab分页式菜单,以供学习,供参考。
用jQuery实现的简单tab标签切换效果,十分简单,每个人都能看懂。
本文实例讲述了JavaScript实现的简单Tab点击切换功能。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <title>www.jb51.net tab点击切换</title> <style type=...
本文实例讲述了JS实现的简单tab切换功能。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net tab切换</title&...
[QT]实现Tab键切换控件的两种方式及禁止Tab切换的简单方法,详细信息内容见博客:https://blog.csdn.net/humanking7/article/details/80697667
大家肯定也有各种工具可以将具有经纬度点坐标转换成KML,但是对于已经生成的KML文件,相信大家基本都不会反向转换,下面就简单介绍一下如果将点格式的KML或多边形的KML转换为excel或TAB格式 (1)点格式的KML转换为...
Asp.net2.0实现简易菜单Tab切换
本文实例为大家介绍实现tab选项卡的应用,此插件相对比较简单,具体内容如下 源码文件: tab.js 实现原理: 1、单击一个元素时,首先将原来高亮的元素取消 2、然后给被单击元素进行高亮 3、如果单击元素是下拉框中...