javascript - 下拉时 Div 背景颜色发生变化

Question

我了解 javaScript，但我不习惯它，因为我更专注于创建 UI 设计。所以决定参加一些短期类(class)，然后我遇到了这个问题。应该有一个下拉菜单，其中包含 4 个元素可供选择:红色、蓝色、绿色、黄色。如果用户选择一种颜色(假设是黄色)，那么下面的 div 框将变成黄色。顺便说一句，我为此使用了 Bootstrap。

我的代码是这样的 ` Dropdown 1

<ul class="dropdown-menu">
    <li id="red"><a href="#">Red</a>
    </li>
    <li><a href="#">Blue</a>
    </li>
    <li><a href="#">Green</a>
    </li>
    <li><a href="#">Yellow</a>
    </li>
</ul>

`完整代码位于此处 http://jsfiddle.net/0c4dbr9t/7/

Answer 1

尝试这个简单的代码

Demo

代码:

<div class="btn-group"> <a class="btn " href="#">Dropdown 1</a>
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>

    <ul class="dropdown-menu">
        <li data-color="red"><a href="#">Red</a>
        </li>
        <li data-color="blue"><a href="#">Blue</a>
        </li>
        <li data-color="green"><a href="#">Green</a>
        </li>
        <li data-color="yellow"><a href="#">Yellow</a>
        </li>
    </ul>
</div>

<div id ="box"><div>

$( document ).ready(function() {
 $('.dropdown-menu li').click(function(){
        var color = $(this).data("color");

        $("#box").css('background-color',color);
        });
});