您的位置：首页 > Web前端 > JQuery

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

2015-04-27 09:05 1106 查看

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

原生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>

是不是简单了好多！

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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 原生js jQuery 选项卡

相关文章推荐

新的分享

章节导航