请问如何实现鼠标移到li上改变另一个div的样式

7回答

闹小志

这类问题我知道的有两种办法：1、根据索引，比如你点击了第几个li，第几个div样式就要变化这样。这个方法有缺陷，就是你的位置必须是一一对应的，顺序不能乱，相比下，第二种办法就更灵活了。2、就是设置一个关联的东西，把他们联系在一起。比如你的li是同级的，你就给class设置成了A某（例A1，A2，A3...），div是受控制的一方，你就给class设置成了B某（例B1，B2，B3...），然后给每个li都设置一个data-flag。比如：<li class="B1" data-flag="1"><a href=#>嘟嘟噜</a></li> <li class="B2" data-flag="2">...............................................</li>然后点击哪个li，你就获取到当前的li的data-flag值和A拼上个字符串，用jquery表示就是：$("li").click(function(){ $(".A"+$(this).data("flag")).css(你要改变的样式属性); });总结：问题不是你是不是必须设置成某1 某2 某3这种形式你也可以设置成如下形式：<div class=A0> <ul> <li class=“B1” data-r="a"><a href=#>嘟嘟噜</a></li> <li class=“B2” data-r="b">...............................................</li> </ul> </div> <div class=“menu-a”><a href=#>阿卡琳</a></div> <div class=“menu-b”>..............................................</div>$("li").click(function(){ $(".menu-"+$(this). ("r")).css(你要改变的样式属性); });总之，思想了解了，怎么写就是你自己的事儿了，反正是有这么个办法，我一般都是这样用~

weibo_哆啦A梦有大口袋_0

潭风灬

可以将Ax对应的div放在Bx的li里面，再设置样式

weibo_哆啦A梦有大口袋_0

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>测试</title><script type="text/javascript" src="jquery-1.7.1.min.js"></script> <style type="text/css"> li{list-style: none;} a{text-decoration: none;color: #000;} .B li.cursor{background: red;} .A li{float: left;height: 30px;margin: 0 10px;} .B li{float: left;height: 30px;margin: 0 10px;} </style></head><body><ul class="A"> <li><a href="JavaScript:;">嘟嘟噜</a></li> <li><a href="JavaScript:;">哈哈哈</a></li> <li><a href="JavaScript:;">移入3</a></li> <li><a href="JavaScript:;">移入4</a></li> <div style="clear:both;"></div></ul><ul class="B"> <li><a href="JavaScript:;">阿卡林</a></li> <li><a href="JavaScript:;">末日使者</a></li> <li><a href="JavaScript:;">变化3</a></li> <li><a href="JavaScript:;">变化4</a></li> <div style="clear:both;"></div></ul></body><script type="text/javascript">$(function(){ $(".A li").mouseenter(function(){ var index=$(this).index(); $(".B li").eq(index).addClass('cursor').siblings().removeClass("cursor"); }) $(".A li").mouseleave(function(){ $(".B li").removeClass('cursor'); })})</script></html>

weibo_哆啦A梦有大口袋_0

不懂问我