<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樣式。可能會有優先級的問題請問鼠標移過“嘟嘟?！钡臅r候改變“阿卡琳”的樣式該如何實現追加提問：因為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>
-
qq_見過雪_0試了一下.不知道為什么一點反應沒有 $(document).ready(function(){ $(".B1").hover(function(){ $(".A1").removeClass('A1 a:link').addClass('sf'); },function(){ alert("啊啊啊啊啊"); $(".A1").addClass('A1 a:link').removeClass('sf'); }); }); 這是我寫的,但是只有鼠標移入執行了,替換成了樣式sf. 但是鼠標移開之后的樣式換回沒有執行,alert卻執行了....請問是為什么呢 -
qq_見過雪_0為什么沒有排版?..呃,不知道這樣能看清么
-
qq_見過雪_0http://www.xianlaiwan.cn/wenda/detail/316216 沒有找到排版按鈕.請移步新問題.謝謝了
點擊展開后面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 關注
- 9917 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消