ホームページ > 記事 > ウェブフロントエンド > ネイティブ js と jQuery_jquery で記述された Web タブの効果の比較
ネイティブ js と jQuery_jquery で記述された Web タブの効果の比較
- WBOYオリジナル
- 2016-05-16 16:02:051108ブラウズ
一般に、考え方は比較的単純です。つまり、最初にノードを取得し、次にそれに応じてノードを処理します。以下は完全なページ コードです。
ネイティブ 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>
もっと簡単ではないですか!
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。