js实现的tab标签切换效果代码分享

2019-11-20 11:43:22

字体：大中小

来源：转载

供稿：网友

这是一款基于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标签实例，希望大家可以喜欢。

上一篇：Jquery 分页插件之Jquery Pagination

下一篇：JavaScript实现向右伸出的多级网页菜单效果