1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
*{ margin:0;padding:0; }
.title{ border:1px solid green;width:250px; }
.content{ border:1px solid red;width:250px;height:200px; }
span{ padding:0 10px;cursor:pointer; }
.active{ color:#ff0000; }
</style>
</head>
<body>
<div class="title">
<span class="active">标题一</span>
<span>标题二</span>
<span>标题三</span>
</div>
<div class="content">
<div class="con">这里是内容一</div>
<div class="con">这里是内容二</div>
<div class="con">这里是内容三</div>
</div>
<script type="text/javascript">
$(function(){
$('.con:gt(0)').hide();
$('span').on('click',function(){
var index = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('.con').eq(index).show().siblings().hide();
});
});
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
