<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
*{padding:0px;margin:0px;}
.box ul li{ display: inline-block; width:100px;height:40px;line-height:40px;}
.boy{display:none;}
.active{color:red ;}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</div>
<div class="boy " style="display:block;">内容一</div>
<div class="boy">内容二</div>
<div class="boy">内容三</div>
<script>
$(function(){
$('.box ul li').click(function(){
$('.box ul li').eq($(this).index()).addClass('active').siblings().removeClass('active');
$('.boy').hide().eq($(this).index()).show();
})
})
</script>
</body>
</html>
网友评论