<body><div id=wrap><div class=map> <div class=A0> <ul> <li class=B1><a href=#>嘟嘟噜</a></li> <li class=B2>...............................................</li> </ul> </div> <div class=A1><a href=#>阿卡琳</a></div> <div class=A2>..............................................</div></div></body>备注：B1和A1本身有css的link，visited和hover样式。可能会有优先级的问题请问鼠标移过“嘟嘟噜”的时候改变“阿卡琳”的样式该如何实现追加提问：因为A1和B1是一一对应的。如果能有一个函数直接让Bx影响Ax这种最好了谢谢大神
7 回答
已采纳
闹小志
TA贡献75条经验 获得超42个赞
这类问题我知道的有两种办法：
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
TA贡献107条经验 获得超146个赞
<!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;}
</style>
</head>
<body>
<ul>
<li><a href="JavaScript:;">嘟嘟噜</a></li>
<li><a href="JavaScript:;">哈哈哈</a></li>
</ul>
<ul>
<li><a href="JavaScript:;">阿卡林</a></li>
<li><a href="JavaScript:;">末日使者</a></li>
</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>
点击展开后面1条
weibo_哆啦A梦有大口袋_0
TA贡献107条经验 获得超146个赞
<!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>
- 7 回答
- 0 关注
- 9846 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消