js封装tab标签页实例分享

话不多说，请看代码

<html>
<head>
  <title></title>
  <meta charset="UTF-8">
  <style>
    *{ padding:0; margin:0;}
    .block{ display:block;}
    .none{ display:none;}
    #wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}
    #tab1,#tab2{ list-style:none;}
    #tab1 li,#tab2 li{ width:66px; height:28px; border:1px solid #09C; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;}
    #tab2 li:hover{ background:#CCC;}
    #tab1 li.on,#tab2 li.on{ background:#9C3;}
    #wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;}
  </style>
</head>
<body>
<div id="wrap">
  <ul id="tab1">
    <li class="on">第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ul>
  <br clear="all" />
  <div class="block">第一部分</div>
  <div class="none">第二部分</div>
  <div class="none">第三部分</div>
</div>
<div id="wraps">
  <ul id="tab2">
    <li class="on">第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ul>
  <br clear="all" />
  <div class="block">第一部分</div>
  <div class="none">第二部分</div>
  <div class="none">第三部分</div>
</div>
<script type="text/javascript">
  tab("wrap","tab1","mouseover")
  tab("wraps","tab2");
  function tab(wrap,navul,eve){
//tab效果封装，目前只有两种变换方式，一种为点击事件click（也是默认事件），另外一种为鼠标移过事件mouseover
    var divs=document.getElementById(wrap).getElementsByTagName("div");
    var lis=document.getElementById(navul).getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
      lis[i].indx=i;
      if(eve=="click" || eve==null){
        lis[i].onclick=function(){
          for(i=0;i<lis.length;i++){
            lis[i].className="";
            divs[i].className="none";
            this.className="on";
            divs[this.indx].className="block";
          }
        }
      }else if(eve=="mouseover"){
        lis[i].onmouseover=function(){
          for(i=0;i<lis.length;i++){
            lis[i].className="";
            divs[i].className="none";
            this.className="on";
            divs[this.indx].className="block";
          }
        }
      }
    }
  }
</script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# js # tab # 封装 # JS控制表格隔行变色 # 原生JS操作网页给p元素添加onclick事件及表格隔行变色 # javascript实现table表格隔行变色的方法 # 高效的表格行背景隔行变色及选定高亮的JS代码 # javascript表格隔行变色加鼠标移入移出及点击效果的方法 # JavaScript实现的斑马线表格效果【隔行变色】 # 纯css+js写的一个简单的tab标签页带样式 # 最简单纯JavaScript实现Tab标签页切换的方式(推荐) # js与jquery分别实现tab标签页功能的方法 # JavaScript实现的原生态Tab标签页功能【兼容IE6】 # JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】 # 第一部分 # 第二部分 # 第三项 # 鼠标 # 两种 # 第一项 # 多说 # hidden # overflow # auto # float # pre # height # px # solid # border # text # list # li # charset

返回目录在线咨询

上一篇：Python 图的邻接字典实现：避免重复边导致的邻接顶点数量错误
下一篇：小天使网站制作软件,小天使基金是怎么样申请的？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

js封装tab标签页实例分享

您的项目需求