Javascript div标签有问题_Javascript_Html_Onclick

Javascript div标签有问题

javascript html

Javascript div标签有问题,javascript,html,onclick,Javascript,Html,Onclick,我有以下代码 <HTML> <HEAD> <style type="text/css"> .setbgcolor{ background-color:blue; } </style> <script type="text/javascript"> function setbg(id){ document.getElementById(id).className = "setbgcolor"; } </script> &

我有以下代码

<HTML>
<HEAD>
<style type="text/css">
.setbgcolor{
background-color:blue;

}

</style>
<script type="text/javascript">
function setbg(id){
document.getElementById(id).className = "setbgcolor";

}
</script>
</HEAD>
<BODY>
<div onclick="setbg(this.id)" id="bgcolor">Label1</div>
<div>Label2</div>
</BODY>
</HTML>


.蓝色{
背景颜色：蓝色；
}
功能设置（id）{
document.getElementById（id）.className=“setbgcolor”；
}
标签1
标签2

现在，问题是-当我点击Label2时，背景色应该从第一个div中删除，并应用到第二个div。有人能帮我吗？

试着看一下。这将使您的生活更轻松。

您可能需要类似于存储先前单击的div的变量之类的东西

例如：

var previouslyClickedDiv = null;

function setbg(id){
    if (previouslyClickedDiv) { previouslyClickedDiv.className = ""; }
    var div = document.getElementById(id);
    div.className = "setbgcolor";
    previouslyClickedDiv = div;
}

当然，您可以使用更短的变量名

在JavaScript中可能没有类似于

onnclick

的事件；有，但这需要元素在被触发之前具有焦点

这就是说，假设您希望在任何时候只突出显示一个div

var buttons = document.getElementsByClassName('button'), curHighlights;

for (i=0; i<buttons.length; i++){
    buttons[i].onclick = function(){
        curHighlights = document.getElementsByClassName('bgcolor');
        if (curHighlights.length) {
            for (h=0; h<curHighlights.length; h++){
                // warning: the following removes _all_ class-names
                curHighlights[h].removeAttribute('class');
            }
        }
            this.className = 'bgcolor';
            this.setAttribute('data-state','1');

    };
}

是否可以使用javascript？是否存在与onclick相反的事件？不确定您的意思…您单击了什么或没有。没有OnNoClick之类的东西。你有onmouseover或onmouseout等方法……但我不确定这是否有帮助。我在你的问题中看到了是的。

$('.button').click(
    function(){
        $('.bgcolor').removeClass('bgcolor');
        $(this).addClass('bgcolor');
    });