eq()动态实现同级显示隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>同级显示隐藏</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
div a{
float: left;
width: 50px;
}
.editBox{
width: 200px;
}
.leftCur{
color: #ff3366;
}
</style>
</head>
<body>
eq动态关联
<div class="proH2left">
<a href="#" class="leftCur">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
<div class="editBox">
<div class="editBoxCon bnone">a</div>
<div class="editBoxCon">b</div>
<div class="editBoxCon">c</div>
<div class="editBoxCon">d</div>
</div>
<script>
$(document).on('click', '.proH2left> a', function () {
var nums = $(this).index();
$(".editBox .editBoxCon").siblings().hide().eq(nums).show();
$(this).addClass("leftCur").siblings().removeClass("leftCur");
})
</script>
</body>
</html>
