<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>14.7jQuery实现选项卡</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
$('input').click(function(){
//alert($(this).val());
$(this).addClass('active').siblings().removeClass('active');
//$(this).addClass('active')为当前元素追加样式
//$(this).addClass('active').siblings()返回当前对象的兄弟节点
//.siblings().removeClass('active');移除所有兄弟节点样式
var i = $(this).index();//当前对象的位置
$('div').eq(i).addClass('show').siblings().removeClass('show');
});
});
</script>
<style>
div{ width:260px; height:100px; border:1px solid red; display:none;}
.show{ display:block;}
.active{ color:blue;}
</style>
</head>
<body>
<input type="button" value="name1" class="active">
<input type="button" value="name2">
<input type="button" value="name3">
<input type="button" value="name4">
<div class="show">content1</div>
<div>content2</div>
<div>content3</div>
<div>content4</div>
</body>
</html>
效果如图
