jquery方法，，用li标签控制div的显示和隐藏

就是在一个<ul><li></li><li></li><li></li></ul>这个标签里有几个li标签，每个li对应一个div,所对应的div默认为隐藏，当鼠标移动到li上时对应的div显示出来，鼠标移动到显示出来的div上时该div也保持显示状态，当鼠标移走到除li和div之外时div的状态又变为隐藏。。哪位大神告诉下，谢谢了，

举报该文章

相关建议推荐于2018-02-27

<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>

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/fm77v7f2mqvqffv48s4.html

其他看法

第1个回答 2015-09-08

相似回答

大家正在搜