Question

求javascript高手帮我解决下，我想要个点击事件来回替换div样式。

有n个div，首先默认第一个与其它几个样式不同，当点击（注：当鼠标移动到其它div时，它的样式也会与点击时的样式一样，只是没有选中它。也就是hover属性）第二个div时，第一个默认的样式就会还原成与其它样式一样。如下图：

Answer 1

我就不写那么多了 , 我看了下面那位兄弟写的 , 可以 , 但是就加一句JS就行了!
$('.a .b').each(function(){

$(this).click(function(){
$('.b').removeClass("c");
$(this).addClass("c");
});

});

追问

哥，不行啊，你的连鼠标移上去的效果都没有了，我要实现的是 鼠标移上去的效果和鼠标点击（也就是选中了这个div）的效果，你好好看看我的描述。

追答

我知道你说的什么 , 你看看提示错误是什么 ?
还是把我这段代码加到他个JS代码后面

追问

没有提示错误什么也没有，我把你的单独放也不行，和上面那位一起放也不行。就是没效果

追答

那我单独给你重新写一个吧!

追问

好，谢谢大神。

追答

无标题文档

$(document).ready(function(){

$('.box a').each(function(){
$(this).click(function(){
$('.box a').removeClass('ahover');
$(this).addClass('ahover');
});
});

});

.box{}
.box a{display:block;width:400px;height:50px;background:#CCCCCC;float:left;}
.box a:hover{display:block;width:400px;height:50px;background:#666666;}
.box .ahover{background:#666666;}

1
2
3

这种写法就比较简单易懂了 !

追问

哇。谢谢大神。你的这种效果好像可以。不知道分该给谁，楼上那位大神也帮我写了好多。大神

追答

采用的谁的就给谁分吧

Answer 2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
.a{width:400px;}
.a .b{width:100px;float:left;}
.c{border:1px solid green;}
</style>
<script>
$(function(){
$(".a .b").not(":first").hover(function(){
$(this).addClass("c")
},function(){
$(this).removeClass("c")
});
});
</script>
<div class="a">
<div class="b c">我是div</div>
<div class="b">我是div</div>
<div class="b">我是div</div>
</div>

追问

亲，你的这个没有点击事件，假如你点击第二个div时，样式还是在第一个div上，

追答

.a{width:400px;}
.a .b{width:100px;float:left;}
.c{border:1px solid green;}

$(function(){
$(".b").click(function (){
$(this).addClass("c d").siblings().removeClass("c d");
});
$(".b").hover(function(){
$(this).addClass("c");
},function(){
if(!$(this).hasClass("d")){
$(this).removeClass("c");
}
});
});

我是div
我是div
我是div

追问

大神，你的代码显示有错误，我找不出来，你再好好看看。

追答

没错误啊，我IE8和谷歌浏览器测试都没错误

追问

大神你看。谢谢大神的耐心回答，真的非常感觉大神。这次我先把分给下家了。