Question

我试图关注另一个例子here并对我的代码提出一些问题。

为什么颜色仅应用于文本周围的区域而不是整个div？
为什么在点击相邻的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

这是错误的：

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/

Answer 2

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”的span作为替代。

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

切换背景div颜色

2 个答案: