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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
苏州蓝晓生物科技有限公司_
2022-08-05 广告
苏州蓝晓生物科技有限公司。标准化核心产品：公司拥有完整的琼脂糖介质、葡聚糖介质、聚甲基丙烯酸酯介质生产线，年产分离介质50000L，产品质量稳定并达到国际领先水平。核心优势：公司核心技术人员拥有近二十年不同基质的基球开发和官能化的丰富技术经...
点击进入详情页
本回答由苏州蓝晓生物科技有限公司_提供
展开全部
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
