星空网 > 软件开发 > Java

使用原生js与jQuery分别实现一个简单的tab页签

  tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形。使用面非常广,下面我们用两种方法简单实现之。

  首先,构建页面元素。页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动。而页签内容部分使用div承载即可。另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构:

  

<div id="main">      <ul id="tabbar" class="cl">        <li class="t1">t1</li>        <li class="def">t2</li>        <li class="def">t3</li>        <li class="def">t4</li>        <li class="def">t5</li>      </ul>      <div id="content">        <div class="cont t1">Hi !</div>        <div class="cont t2">I Like You!</div>        <div class="cont t3">Hello World!</div>        <div class="cont t4">How Are You?</div>        <div class="cont t5">I'm fine ,and you?</div>      </div> </div>

  ul左浮动以后,为了清除浮动对后续元素的影响,所以通过after伪类设置clear属性,同时兼顾ie低版本加入zoom触发ie haslayout。所以就有了下面的样式:

html,body,div,ul,li{margin:0; padding:0; }.cl{zoom:1;}.cl:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:'.';}ul{list-style:none;}    body{padding-top:100px; background:#eee; font-family:Microsoft YaHei, Arial, Helvetica, sans-serif;}#main{margin:0 auto; width:800px;}#main #tabbar{}#main #tabbar li,#main #content .cont{text-align:center; color:#fff;}#main #tabbar li{padding:0 20px; height:35px; line-height:35px; font-size:14px; cursor:pointer; float:left;}#main #content{height:350px; overflow:hidden; position:relative;}#main #content .cont{width:100%; height:350px; line-height:350px; font-size:48px; z-index:0; position:absolute;}#main #tabbar li.def{color:#333; background:#fff;}#main #tabbar li.t1,#main #content .cont.t1{color:#fff; background:#4e6b9c;}#main #tabbar li.t2,#main #content .cont.t2{color:#fff; background:#c52946;}#main #tabbar li.t3,#main #content .cont.t3{color:#fff; background:#33a6ff;}#main #tabbar li.t4,#main #content .cont.t4{color:#fff; background:#ffab4e;}#main #tabbar li.t5,#main #content .cont.t5{color:#fff; background:#64bccc;}

 

  html部分大致如此。

  采用原生js实现时,我们这里主要对每个li分别绑定点击事件,通过点击使当前内容页显示,其他内容页隐藏,显隐的过程通过定时器不断增减内容的透明度直至完全隐藏或显示。

  

window.onload = function(){  var tabs = document.getElementById("tabbar").getElementsByTagName("li");  var cont = document.getElementById("content").getElementsByTagName("div");  var len = cont.length;  var flag = true;    var fade = function(elem, callback, type){    type || (type = "in");    var px, timer;        if(type == "in")    {      px = 0;      timer = setInterval(function(){        px += 3;        if(px <= 100)        {          elem.style.opacity ? (elem.style.opacity = (px / 100)) : (elem.style["filter"] = "alpha(opacity=" + px + ")");        }        else        {          clearInterval(timer);          elem.style.opacity ? (elem.style.opacity = 1) : (elem.style["filter"] = "alpha(opacity=100)");          callback && callback(elem);        }      },10);    }    else    {      px = 100;      timer = setInterval(function(){        px -= 3;        if(px >= 0)        {          document.addEventListener ? (elem.style.opacity = (px / 100)) : (elem.style["filter"] = "alpha(opacity=" + px + ")");        }        else        {          clearInterval(timer);          elem.style.opacity ? (elem.style.opacity = 0) : (elem.style["filter"] = "alpha(opacity=0)");          callback && callback(elem);        }      },10);    }  }    for(var i = 0; i < len; i++)  {    cont[i].style.zIndex = len - i;    tabs[i].index = cont[i].index = i;    tabs[i].onclick = function(){      if(flag)      {        flag = false;        cont[this.index].style.display = "block";        fade(cont[this.index]);        for(var i = 0; i < len; i++)        {          tabs[i].className = "def";          if(tabs[i].index != this.index)          {            fade            (              cont[i],              function(elem)              {                elem.style.display = "none";                elem.className = "cont t" + (elem.index + 1);                flag = true;              },              "out"            );          }        }        this.className = "t" + (this.index + 1);      }    }  }};

  由上可见,其实使用原生js操作dom还是比较麻烦的,不然“write less,do more”的jQuery也不会诞生。下面用jQuery简单实现:

$(function(){    var tabs = $("#tabbar li");    var cont = $("#content .cont");    var len = cont.length;        cont.each(function(inx, elem){$(elem).css("z-index", len - inx);}).andSelf().hide().andSelf().eq(1).show();        tabs.click(function(){      var inx = tabs.index(this);      tabs.removeAttr("class").addClass("def").andSelf().eq(inx + 1).addClass("t" + (inx + 1));      cont.fadeOut(300).not(this).andSelf().eq(inx).fadeIn(300);    });  });

 

  这个例子比较简单,但却很实用,当然实际工作中我们一般不会这样去写,我们通常会把以此为基础去封装一个可重用的控件,但基本思想不变。

  代码下载

 




原标题:使用原生js与jQuery分别实现一个简单的tab页签

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

VAT税制的优势与应用:https://www.kjdsnews.com/a/1339088.html
VAT税制正确的读法和使用方法:https://www.kjdsnews.com/a/1339089.html
VAT税制正确的发音和使用方法:https://www.kjdsnews.com/a/1339090.html
亚马逊、ebay、速卖通、美客多卖家如何做好测评让店铺销量稳定增长:https://www.kjdsnews.com/a/1339091.html
亚马逊、沃尔玛自养号测评和撸卡、撸货需要的技术原理一样吗?:https://www.kjdsnews.com/a/1339092.html
欧税通 | 亚马逊严查德国VAT地址!防关店指南来了~:https://www.kjdsnews.com/a/1339093.html
探讨内地人开设香港账户的可行性 :https://www.kjdsnews.com/a/1836442.html
在古巴做游轮 古巴旅游项目:https://www.vstour.cn/a/363194.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流