求教jquery选择第一个选项隐藏<div>选择第二个选项显示这个div
2个回答
展开全部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点击隐藏div</title>
<style>
div,ul,li{ padding:0; margin:0; list-style:nonel}
.menu{ float:left;}
.menu ul li{ width:100px; height:30px; margin-bottom:5px; background:#06C; color:#fff; text-align:center; line-height:30px; cursor:pointer}
.menu ul li.cur{ background:#363;}
.content{ width:600px; height:300px; float:left; color:#fff;}
.content div{ background:#03C; width:100%; height:100%; }
</style>
<script type="text/javascript" src="http://www.sz886.com/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu li").click(function(){
//得到当前是第几个菜单点击了，深圳网站建设:www.sz886.com
var index = $(".menu li").index(this);
//在点击的菜单上面加入一个cur样式，判断为当前点击到，删除没有点击到的cur
$(this).addClass("cur").siblings().removeClass("cur");
//点击第一个隐藏
if(index==0){
$(".content div").hide();
}else{
//第二个显示
$(".content div").show();
}
})
});
</script>
</head>
<body>
<div class="menu">
<ul>
<li class="cur">隐藏</li>
<li>显示</li>
</ul>
</div>
<div class="content">
<div>订单内容</div>
</div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
