这是一款基于js实现的tab标签切换效果,是一款无需jQuery,原生javascript制作的tab切换效果源码。点击上面的标题即可实现对应页面的切换功能,非常具有实用价值。
运行效果图:-------------------查看效果 下载源码-------------------
小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的js实现的tab标签切换效果代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js实现tab标签切换效果</title> <style> *{ margin:0; padding:0; list-style:none;} body{ font-size:12px;} #menu{width:360px; overflow:hidden; margin:100px auto;border:1px solid #BF9660;} #menu #nav {display:block;width:100%;padding:0;margin:0;list-style:none;} #menu #nav li {float:left;width:120px;} #menu #nav li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center; color:#333;} #menu_con{ width:358px; height:135px; border-top:none} .tag{ padding:10px; overflow:hidden;} .selected{background:#C5A069; color:#fff;} </style> </head> <body> <!--代码部分begin--> <div id="menu"> <!--tag标题--> <ul id="nav"> <li><a href="#" class="selected">jQuery特效</a></li> <li><a href="#" class="">tab切换</a></li> <li><a href="#" class="">菜单导航</a></li> </ul> <!--二级菜单--> <div id="menu_con"> <div class="tag" style="display:block"> 这里是jQuery特效内容列表 </div> <div class="tag" style="display:none"> 这里是tab切换效果 </div> <div class="tag" style="display:none"> 这里是菜单导航效果 </div> </div> </div> <script> var tabs=function(){ function tag(name,elem){ return (elem||document).getElementsByTagName(name); } //获得相应ID的元素 function id(name){ return document.getElementById(name); } function first(elem){ elem=elem.firstChild; return elem&&elem.nodeType==1? elem:next(elem); } function next(elem){ do{ elem=elem.nextSibling; }while( elem&&elem.nodeType!=1 ) return elem; } return { set:function(elemId,tabId){ var elem=tag("li",id(elemId)); var tabs=tag("div",id(tabId)); var listNum=elem.length; var tabNum=tabs.length; for(var i=0;i<listNum;i++){ elem[i].onclick=(function(i){ return function(){ for(var j=0;j<tabNum;j++){ if(i==j){ tabs[j].style.display="block"; //alert(elem[j].firstChild); elem[j].firstChild.className="selected"; } else{ tabs[j].style.display="none"; elem[j].firstChild.className=""; } } } })(i) } } } }(); tabs.set("nav","menu_con");//执行 </script> <!--代码部分end--> </body> </html>
以上就是为大家分享的简单纯js实现点击切换TAB标签实例,希望大家可以喜欢。
本文向大家介绍JS实现标签页切换效果,包括了JS实现标签页切换效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS标签页切换的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍js实现点击切换TAB标签实例,包括了js实现点击切换TAB标签实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现点击切换TAB标签。分享给大家供大家参考。具体如下: 这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风格适用于大部分的网站,或许你会用得上。 先来看看运行效果截图: 在线演示地址
本文向大家介绍js+css实现tab菜单切换效果的方法,包括了js+css实现tab菜单切换效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js+css实现tab菜单切换效果的方法。分享给大家供大家参考。具体实现方法如下: index.css如下: index.html如下: 希望本文所述对大家的javascript程序设计有所帮助。
本文向大家介绍js实现简洁的TAB滑动门效果代码,包括了js实现简洁的TAB滑动门效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现简洁的TAB滑动门效果代码。分享给大家供大家参考。具体如下: 这是一款滑动门代码,简洁TAB,简单的鼠标导航效果,大家或许经常见到的效果啦,鼠标放在主菜单上,下边框架内的内容会跟着变换,鼠标不需要点击,只需要滑上去就可切换内容,像一扇门,所以有时
本文向大家介绍jquery实现有过渡效果的tab切换,包括了jquery实现有过渡效果的tab切换的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jquery实现tab切换的具体代码,供大家参考,具体内容如下 效果: 代码: 如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总、jquery选项卡操作方法汇总 以上就是本文的全部内容,希望对大家的学习有
本文向大家介绍js实现TAB切换对应不同颜色的代码,包括了js实现TAB切换对应不同颜色的代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现TAB切换对应不同颜色的代码。分享给大家供大家参考。具体如下: 这是一个个性化的TAB菜单,每个TAB卡片的背景颜色都不相同,鼠标点击上部的TAB,在主体内容区可看到颜色的变化。 运行效果截图如下: 在线演示地址如下: http://demo