你的位置:首页 > Java教程

[Java教程]原生javascript写的网页选项卡和jQuery写的比较


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

<!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>

是不是简单了好多!