这是一款基于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--><p 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><!--二级菜单--><p id="menu_con"> <p class="tag" style="display:block"> 这里是jQuery特效内容列表 </p> <p class="tag" style="display:none"> 这里是tab切换效果 </p> <p class="tag" style="display:none"> 这里是菜单导航效果 </p> </p></p><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("p",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标签实例，希望大家可以喜欢。
更多相关内容：
