jquery方法，，用li标签控制div的显示和隐藏
就是在一个<ul><li></li><li></li><li></li></ul>这个标签里有几个li标签，每个li对应一个div,所对应的div默认为隐藏，当鼠标移动到...
就是在一个<ul><li></li><li></li><li></li></ul>这个标签里有几个li标签，每个li对应一个div,所对应的div默认为隐藏，当鼠标移动到li上时对应的div显示出来，鼠标移动到显示出来的div上时该div也保持显示状态，当鼠标移走到除li和div之外时div的状态又变为隐藏。。哪位大神告诉下，谢谢了，
展开
2个回答
展开全部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$(".content div").hide();
$("li").hover(function() {
$(this).toggleClass('hover');
$(".content").find("div").eq($(this).index()).show();
}, function() {
$(this).toggleClass('hover');
$(".content").find("div").eq($(this).index()).hide();
});
$(".content div").hover(function() {
$(this).show();
}, function() {
$(this).hide();
});
})
</script>
<style>
*{margin:0;padding:0;}
body{padding:20px;}
ul{float:left;}
li{margin-bottom:20px;padding:20px;width:150px;height:10px;border:1px solid #ccc;}
.content{float:left;}
.content div{padding:20px;width:800px;height:200px;border:1px solid #ccc;}
.hover{background:#ff6699;}
</style>
</head>
<body>
<ul>
<li><span>我是li 1</span></li>
<li><span>我是li 2</span></li>
<li><span>我是li 3</span></li>
</ul>
<div class="content">
<div>我是我是li 1的div</div>
<div>我是我是li 2的div</div>
<div>我是我是li 3的div</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script>
$(function(){
$(".content div").hide();
$("li").hover(function() {
$(this).toggleClass('hover');
$(".content").find("div").eq($(this).index()).show();
}, function() {
$(this).toggleClass('hover');
$(".content").find("div").eq($(this).index()).hide();
});
$(".content div").hover(function() {
$(this).show();
}, function() {
$(this).hide();
});
})
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
