search

Home >Web Front-end >JS Tutorial >Comparison of web tab effects written in native js and jQuery_jquery

Comparison of web tab effects written in native js and jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 16:02:051124browse

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>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
Previous article：Ideas and methods for implementing Tetris game in javascriptNext article：Ideas and methods for implementing Tetris game in javascript

Related articles

See more