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

js和jquery实现tab选项卡

2015-07-09 23:42 639 查看

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">
<meta name="Author" content="Create by double 2015-07-09">

<title>jquery实现tab</title>
<script src="jquery-1.7.2.js"></script>
<style>
*{
padding:0;
margin:0;
}
ul{
list-style-type:none;
}
#ul{
height:30px;
margin-bottom:10px;
}
body{
margin:50px;
}
#ul li{
height:30pxx;
line-height:30px;
padding:0 15px;
border:1px solid #abcdef;
float:left;
margin-right:3px;
cursor:pointer;
}
#ul li.current{
background:#abcdef;
}
#content div{
width:300px;
height:200px;
border:1px solid #abcdef;
display:none;

}
#content div.show{
display:block;
}
</style>
</head>
<body>
<ul id="ul">
<li class="current">php</li>
<li>java</li>
<li>js</li>
</ul>
<div id="content">
<div class="show">php...介绍</div>
<div>java...介绍</div>
<div >js...介绍</div>
</div>
<script>
//未使用事件委托
var ul = document.getElementById('ul');
var li = ul.getElementsByTagName('li');
var content = document.getElementById('content');
var div = content.getElementsByTagName('div');
for(var i=0;i<li.length;i++){
li[i].index = i;
li[i].onclick=function(){
for(var i=0;i<li.length;i++){
li[i].className = ' ';
div[i].style.display='none';
};
this.className='current';
div[this.index].style.display='block';
}
}

//采用事件委托处理
var oul = document.getElementById('ul');
var ali = ul.getElementsByTagName('li');
var content = document.getElementById('content');
var div = content.getElementsByTagName('div');

//ali[i].index = i;
oul.onclick = function(ev) {

var ev = ev || window.event;
var target = ev.target || ev.srcElement;

if(target.nodeName.toLowerCase() == "li"){

for(var i=0, len=ali.length; i<len; i++){

if(ali[i] == target){
//alert(ali[i]);
ali[i].className = "current";
div[i].style.display = "block";
}
else{

ali[i].className = "";
div[i].style.display = "none";
}
}
}
}
//jquery实现更方便
$('#ul li').click(function(){
//点击li的时候要切换样式
$(this).addClass('current').siblings().removeClass('current');
//根据li的索引值，确定div的显示，其他隐藏
$('#content>div').eq($(this).index()).show().siblings().hide();
});
//jquery实现更方便
$('#ul li').click(function(){
//点击li的时候要切换样式
$(this).addClass('current').siblings().removeClass('current').parent().next().find('div').eq($(this).index()).show().siblings().hide();
});
</script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航