原生js和jQuery写的网页选项卡特效对比

2019-11-20 12:36:17

字体：大中小

来源：转载

供稿：网友

总的来说思路比较简单，就是先获取节点，然后对节点进行相应的处理,下面是完整的页面代码：

原生js：

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>原生js tab</title><style type="text/css">.tab{  margin:10px auto;  position:relative;  width:300px;}ul,li{  list-style-type:none;  padding:0;  margin:0;  font:13px/20px SimSun,arial;  color:#333;  text-align:center;}.tabTltle ul li{ float:left; position:relative; background:#fefefe; background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed)); padding:7px 15px; border:1px #ddd solid; margin-right:-1px; cursor:pointer;}.tabTltle ul li.active{  background:#fff;  font-weight: bold;}.clearfix{}.clearfix:after{  display:block;  clear:both;  overflow:hidden;  content:"";}.tabConn{  border:1px #eee solid;  position:relative;  height:100px}.tabConn div{  position:absolute;  opacity:0;  filter:alpha(opacity=0);  padding:5px;  text-align:center;  width:100%;}.tabConn div.current{  opacity:1;  filter:alpha(opacity=100);}</style></head><body>  <div id="tab" class="tab">    <div class="tabTltle">      <ul class="clearfix">        <li class="active">标题一</li>        <li>标题二</li>        <li>标题三</li>        <li>标题四</li>      </ul>    </div>    <div class="tabConn">      <div class="current">aaaaaaaaaaaaaaa</div>      <div>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>      <div>cccccccccccccccccccccccccccccccc</div>      <div>ddddddddddddddddddddddddddddd</div>    </div>  </div><script type="text/javascript"> (function(){   var tab = document.getElementById("tab");   var tabList = tab.getElementsByTagName("div")[0].getElementsByTagName("li");   var tabConn = tab.getElementsByTagName("div")[1].getElementsByTagName("div");for(var i=0;i<tabList.length;i++){    tabList[i].index = i;    tabList[i].onclick = function(){      showConn(this.index);    }  }  function showConn(_index){    var index = _index;for(var j=0;j<tabList.length;j++){      tabList[j].className = "";      tabConn[j].className = "";      tabConn[j].style.opacity=0;    }    tabConn[index].className="current";    tabList[index].className="active";  } })();</script></body></html>

下面我们来看一下jQuery写的（css共用,需要引进jQuery库）：

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>jQuery tab</title><script type="text/javascript" src="js/jquery-1.8.1.min.js"></script><style type="text/css">.tab{ margin:10px auto; position:relative; width:300px;}ul,li{ list-style-type:none; padding:0; margin:0; font:13px/20px SimSun,arial; color:#333; text-align:center;}.tabTltle ul li{ float:left; position:relative; background:#fefefe; background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed)); padding:7px 15px; border:1px #ddd solid; margin-right:-1px; cursor:pointer;}.tabTltle ul li.active{ background:#fff; font-weight: bold;}.clearfix{}.clearfix:after{ display:block; clear:both; overflow:hidden; content:"";}.tabConn{ border:1px #eee solid; position:relative; height:100px}.tabConn div{ position:absolute; opacity:0; filter:alpha(opacity=0); padding:5px; text-align:center; width:100%;}.tabConn div.current{ opacity:1; filter:alpha(opacity=100);}</style></head><body><h3>jQuery写的选项卡:</h3> <div id="tab2" class="tab">  <div class="tabTltle tab-title">   <ul class="clearfix">    <li class="active">标题一</li>    <li>标题二</li>    <li>标题三</li>    <li>标题四</li>   </ul>  </div>  <div class="tabConn tab-conn">   <div class="current">aaaaaaaaaaaaaaa</div>   <div>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>   <div>cccccccccccccccccccccccccccccccc</div>   <div>ddddddddddddddddddddddddddddd</div>  </div> </div><script type="text/javascript">$(document).ready(function(){ var $tabTitle = $('.tab-title').find('li'); var $tabList = $('.tab-conn > div'); $tabTitle.click(function(){  $tabTitle.each(function(){   $tabTitle.removeClass('active');  });  var index = $tabTitle.index(this);  $(this).addClass('active');   $tabList.eq(index).addClass('current').siblings().removeClass('current'); });});</script></body></html>

是不是简单了好多！

以上所述就是本文的全部内容了，希望大家能够喜欢。

上一篇：javascript+html5实现仿flash滚动播放图片的方法

下一篇：javascript实现淘宝幻灯片广告展示效果