Comparison of web tab effects written in native js and jQuery

Home

Web Front-end

JS Tutorial

Comparison of web tab effects written in native js and jQuery_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:02 PM

jqueryNative jsTab

In general, the idea is relatively simple, that is, first obtain the node, and then process the node accordingly. The following is the complete page code:

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

Let’s take a look at what’s written in jQuery (css is shared, you need to import the jQuery library):

<!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 id="jQuery写的选项卡">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>

Isn’t it much simpler!

The above is the entire content of this article, I hope you all like it.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn