Question

我知道javaScript，但我并不是那么流利，因为我更专注于创建UI设计。所以决定学习一些短期课程，然后我遇到了这个问题。应该有下拉菜单，包括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);
        });
});

Answer 2

如果这是你需要的，请告诉我。

<强> HTML

<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 id="dd" class="dropdown-menu">
       <li><a href="#">Red</a>
        </li>
        <li><a href="#">Blue</a>
        </li>
        <li><a href="#">Green</a>
        </li>
        <li><a href="#">Yellow</a>
        </li>
    </ul>
</div>

<div id ="box"><div>

<强> CSS

#box {
margin-top: 20px;
background-color: #000;
padding: 50px;
}

<强> JS

var ul = document.getElementById('dd');
ul.addEventListener("click", changeColor, false);

function changeColor (e) {
  if(e.target.nodeName == "A") {
       document.getElementById("box").style.background =e.target.innerHTML;
    }

}

Answer 3

使用简单的javascript：

＆＃13;

<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 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>
</div>

<div id ="box"> Some Text <div>
<script>
var menu = document.querySelector("ul.dropdown-menu");
menu.onclick = function(evt) {
  console.log(evt.target.innerText)
	document.getElementById("box").style.backgroundColor = evt.target.innerText;
}
</script>

＆＃13;

在下拉列表中更改背景颜色

3 个答案: