jquery的eq()遍历和选择器:eq()造成的结果不同
写一个tab选项卡，遇到一个问题
若是
$('div.tab_box > div')
//选取子节点
.eq(index).show()
.siblings().hide();这样写就可以实现tab切换的效果，
若是 $('div.tab_box > div:eq(index)')
.show()
.siblings().hide()就不能切换。
全部代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>TAB选项卡</title>
<style>
*{padding: 0;margin: 0;}
body{font: normal 14px/1.5em Arial}
#center{margin: 0 auto;width: 300px;position: relative;top: 50px;}
.tab li{width: 50px;height: 25px;font: normal 12px/25px Arial;float: left;background: #F1F1F1;text-align: center;border: 1px solid #ccc;list-style: none;margin-right: 5px;cursor: pointer;
-moz-border-radius: 15% 15% 0 0;
-webkit-border-radius: 15% 15% 0 0;
border-radius: 15% 15% 0 0;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
}
.tab_box{width: 300px;height: 200px;border: 1px solid #ccc;clear: both;}
.tab li.hover{background: #C0C0C0}
.tab li.selected{color: #fff;background: #6D84B4}
.hide{display: none;}
</style>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.tab ul li').click(function() {
$(this).addClass('selected')
// 元素高亮
.siblings().removeClass('selected');
//去掉同辈元素高亮
var index = $('.tab ul li').index(this);
//获取当前点击的<li>元素在全部 li 元素中的索引
$('div.tab_box > div:eq(index)')
//选取子节点
// .eq(index).show()
.siblings().hide();
}).hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
</script>
</head>
<body>
<div id="center">
<div class="tab">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
</body>
</html>
展开
收起
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
