Question

我正在尝试通过点击更改我网站的css属性，更具体地说是当前的导航栏，然后希望稍后扩展。目前我有这个。

 <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Page 1 <b class="caret"></b></a>
                <ul class="dropdown-menu" id="dropdown-menu1">
                    <li id="greenBg"><a href="#" onclick="changeNavbarColor()">Makes the navbar green </a></li>
                    <li id="orangeBg"><a href="#" onclick="changeNavbarColor()">Makes the navbar orange </a></li>
                    <li id="blueBg"><a href="#" onclick="changeNavbarColor()">Makes the navbar blue </a></li>
                </ul>
        </li>

function changeNavbarColor(){

    var navbarCol = document.getElementById("container-fluid1");
    var greenBg = document.getElementById("greenBg");
    var orangeBg = document.getElementById("orangeBg");
    var blueBg = document.getElementById("blueBg");
    var dropdown = document.getElementById("dropdown-menu1");


    var blue = #06F;
    var green = #060;
    var orange = #F60;

    if(dropdown.id == "greenBg"){
        greenBg.style.backgroundColor = green;
    }else if(dropdown.id == "blueBg"){
        blueBg.style.backgroundColor = blue;
    }else if(dropdown.id == "orangeBg"){
        orangeBg.style.backgroundColor = orange;
    };


}

希望每次点击其中一个链接，然后它就会变成那种颜色。到目前为止什么都没发生。也许与访问我有dropdown.id

的元素有关

感谢

Answer 1

通过在this处理程序中注入onlick，您没有选择我们可以解决的正确元素。

你需要传入对象点击宽度event.target的上下文，这样我们就可以获取父元素，然后检查它的id，因为单击的对象将是anchor元素，所以得到我们做event.target.parentNode.id

HTML：

<li id="greenBg"><a href="#" onclick="changeNavbarColor(this)">Makes the navbar green </a></li>

我们需要将此作为上下文传递，以便我们可以获得目标

JS：

if(event.target.parentNode.id == "greenBg"){
      greenBg.style.backgroundColor = green;
  }

这里我们最终检查点击元素的正确ID并更改背景。

您还必须将颜色设置为类似于此var blue = "#06F";的字符串，否则您将在查找变量时收到错误。

您可以看到工作示例here

Answer 2

使用此;从代码中略微修改

 <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Page 1 <b class="caret"></b></a>
                <ul class="dropdown-menu" id="dropdown-menu1">
                    <li id="greenBg"><a onclick="changeNavbarColor('greenBg')">Makes the navbar green </a></li>
                    <li id="orangeBg"><a href="#" onclick="changeNavbarColor('orangeBg')">Makes the navbar orange </a></li>
                    <li id="blueBg"><a href="#" onclick="changeNavbarColor('blueBg')">Makes the navbar blue </a></li>
                </ul>
        </li>

function changeNavbarColor(ids){

var navbarCol = document.getElementById("container-fluid1");
var greenBg = document.getElementById("greenBg");
var orangeBg = document.getElementById("orangeBg");
var blueBg = document.getElementById("blueBg");
var dropdown = document.getElementById("dropdown-menu1");

var blue = "#06F";
var green = "#060";
var orange = "#F60";

if(ids == "greenBg"){
    greenBg.style.backgroundColor = green;
}else if(ids == "blueBg"){
    blueBg.style.backgroundColor = blue;
}else if(ids== "orangeBg"){
    orangeBg.style.backgroundColor = orange;
};

}

Answer 3

如果您可以使用jQuery，请尝试以下代码：

$('#dropdown-menu1 li').on('click', function(){

    var bg;
    if($(this).attr('id') == "greenBg"){
       bg = 'green';
    }else if($(this).attr('id') == "blueBg"){
       bg = 'blue';
    }else if($(this).attr('id') == "orangeBg"){
       bg = 'orange';
    };

    $(this).css("background-color", bg );
});

但这不是编码的最佳方式。最好将自定义属性添加到li元素中，例如：

 <li id="greenBg" data-color="green"><a href="#">Makes the navbar green </a></li>

然后你可以使用这个简短的代码：

 $(this).css("background-color", $(this).data("color") );

以下是工作示例https://jsfiddle.net/x86esu6j/ 我无法理解为什么作者应该使用＆＃34; html onclick＆＃34;而不是事件监听器。

单击时更改css属性

3 个答案: