Question

我正在尝试更改单击的div作为菜单项的背景颜色。

这是我的代码：

<div id="leftpanel">
 <h4>Menu</h4>
 <div id="menuitem" onclick="menuItemClicked('Inicio');">Inicio</div>
 <div id="menuitem" onclick="menuItemClicked('Ventas');">Ventas</div>
 <div id="menuitem" onclick="menuItemClicked('Consultas');">Consultas</div>
 <div id="menuitem" onclick="menuItemClicked('Notas');">Notas</div>
 <div id="menuitem" onclick="menuItemClicked('Ingreso de mercaderia');">Ingreso de mercaderia</div>
 <div id="menuitem" onclick="menuItemClicked('Ingreso de categoria');">Ingreso de categoria</div>               
 <div id="menuitem" onclick="menuItemClicked('salir');">salir</div>

</div>

和.js文件

$(document).ready(function() 
{
 $("#menuitem").click(function()    {
 $(this).css("background-color","red");     
});
});

Answer 1

在HTML中，ID必须是唯一的。请考虑改用类名：

<div id="leftpanel">
 <h4>Menu</h4>
 <div class="menuitem" onclick="menuItemClicked('Inicio');">Inicio</div>
 <div class="menuitem" onclick="menuItemClicked('Ventas');">Ventas</div>
 <div class="menuitem" onclick="menuItemClicked('Consultas');">Consultas</div>
 <div class="menuitem" onclick="menuItemClicked('Notas');">Notas</div>
 <div class="menuitem" onclick="menuItemClicked('Ingreso de mercaderia');">Ingreso de mercaderia</div>
 <div class="menuitem" onclick="menuItemClicked('Ingreso de categoria');">Ingreso de categoria</div>               
 <div class="menuitem" onclick="menuItemClicked('salir');">salir</div>

</div>

和Javascript：

$(document).ready(function() 
{
 $(".menuitem").click(function()    {
 $(this).css("background-color","red");     
});
});

Answer 2

使用class代替id的

这样的事情：

<div id="leftpanel">
    <h4>Menu</h4>
    <div class="menuitem" onclick="menuItemClicked($(this).text());">Inicio</div>
    <div class="menuitem" onclick="menuItemClicked($(this).text());">Ventas</div>
    <div class="menuitem" onclick="menuItemClicked($(this).text());">Consultas</div>
    <div class="menuitem" onclick="menuItemClicked($(this).text());">Notas</div>
    <div class="menuitem" onclick="menuItemClicked($(this).text());">Ingreso de mercaderia</div>
    <div class="menuitem" onclick="menuItemClicked($(this).text());">Ingreso de categoria</div>
    <div class="menuitem" onclick="menuItemClicked($(this).text());">salir</div>
</div>

然后，

$(document).ready(function() {
    $(".menuitem").click(function(){
       $(this).css("background-color","red");     
    });
});

Answer 3

其他人对HTML，Id，Class等所说的一切，你应该实现它，

只需添加此脚本即可获得所需内容

$(document).ready(function () {
    $(".menuitem").click(function () {
        $(".menuitem").css("background-color", "");
        $(this).css("background-color", "red");
    });
});

$(".menuitem").css("background-color", "");额外的行会清除之前的红色项目。

<强> Fiddle

无法使用jquery点击div

3 个答案: