切换背景div的颜色

Question

我试图按照另一个例子here，并有几个关于我的代码下面的问题。

1. 为什么颜色只应用于文本周围的区域而不是整个div？
2. 为什么在点击一个相邻的div时，颜色是否应用于所有div，而不是被删除？

HTML

<div id="content"> 
    <div id="menu"> <a href="#1" class="one"><div class="box">A</div></a> 
<a href="#1" class="one"><div class="box">B</div></a> 
<a href="#1" class="one"><div class="box">C</div></a> 
<a href="#1" class="one"><div class="box">D</div></a> 

    </div> 
</div> 

JS

var obj = {}; 
$(document).ready(function() { 

    $(".one").click(function() { 
     var text = $(this).find(".box").html(); 

     obj.var1 = text; 
     //alert(obj.var1); 
     //return false; 

     $('box').removeClass('selected'); 
     $(this).addClass('selected') 
    }); 
}); 

CSS

#menu div { 
    text-align:center; 
    display:inline-block; 
} 
div.box { 
    position: relative; 
    width: 30px; 
    height: 30px; 
    background: #fff; 
    color: #000; 
    padding: 20px; 
    border: 1px solid; 
} 

div.box:hover { 
    cursor: hand; 
    cursor: pointer; 
    opacity: .5; 
} 

.selected { 
    background : #000000; 
} 

Answer 1

1.颜色仅被施加到div。你应该改变你的CSS来定位a。

更改此

#menu div { ... } 
div.box { ... } 
div.box:hover { ... } 

这个

#menu a { ... } 
a.one { ... } 
a.one:hover { ... } 

2.颜色不删除，因为你忘了。 （点）在选择器之前。

$('box').removeClass('selected'); 

$('.box').removeClass('selected'); 

我也建议不要在div里面有正确的验证。您可以使用style =“display：block”或style =“display：inline-block”作为替代的跨度。

这是一个jsFiddle工作示例：http://jsfiddle.net/A7f94/

Answer 2

这是错误的：

var text = $(this).find(".box").html();
...
$('box').removeClass('selected');

它应该是：
var text = $(this).find(".box");
...
$(".one").removeClass('selected');

有用的链接：

http://api.jquery.com/find/

http://api.jquery.com/html/