jquery代码未运行_Jquery_Html_Css

jquery代码未运行

jquery html css

jquery代码未运行,jquery,html,css,Jquery,Html,Css,单击div1后，我想更改它的颜色当我点击div1时，它必须将其背景色更改为#4A6B4C，但这并没有发生。请帮忙。谢谢 $（文档）.ready（函数（） { $（'#div1'）。单击（函数（） { $（'#div1'）。toggleClass（'change'）； }); }); #div1{背景色：33C43C；宽度：40px；高度：40px；边框半径：50%；颜色：白色；文本对齐：中心；字体大小：30px；} #div2{文本对齐：中心；颜色：白色；背景色：#33C43C；宽度：

单击div1后，我想更改它的颜色

当我点击div1时，它必须将其背景色更改为#4A6B4C，但这并没有发生。请帮忙。谢谢

$（文档）.ready（函数（）
{
$（'#div1'）。单击（函数（）
{
$（'#div1'）。toggleClass（'change'）；
});  
});

#div1{背景色：33C43C；宽度：40px；高度：40px；
边框半径：50%；颜色：白色；文本对齐：中心；字体大小：30px；}
#div2{文本对齐：中心；颜色：白色；背景色：#33C43C；宽度：40px；高度：40px；边框半径：50%；字体大小：30px；}
#div1:悬停{光标：指针；背景色：#4A6B4C；}
#div2:悬停{光标：指针；背景色：#4A6B4C；}
.change{背景色：#4A6B4C；}/*div1必须更改为此颜色*/


s



M

使用id更新选择器或使用

！重要信息

带有样式值，因为带有id的样式具有更高的优先级

#div1.change{
   background-color:#4A6B4C;
}

$（文档）.ready（函数（）{
$（'#div1'）。单击（函数（）{
$（'#div1'）。toggleClass（'change'）；
});
});
#第1部分{
背景色：#33C43C；
宽度：40px；
高度：40px；
边界半径：50%；
颜色：白色；
文本对齐：居中；
字体大小：30px；
}
#第二组{
文本对齐：居中；
颜色：白色；
背景色：#33C43C；
宽度：40px；
高度：40px；
边界半径：50%；
字体大小：30px；
}
#第1部分：悬停{
光标：指针；
背景色：#4A6B4C；
}
#第2部分：悬停{
光标：指针；
背景色：#4A6B4C；
}
#第1部分：变化{
背景色：#4A6B4C；
}
/*div1必须更改为此颜色*/

s



M
使用

上的绑定事件

还可以看到我在CSS中所做的更改。你的风格需要更加具体

$（文档）.ready（函数（）{
$（'#div1'）。在（“单击”，函数（）上）{
$（this.toggleClass（'change'）；
});
});
#第1部分{
背景色：#33C43C；
宽度：40px；
高度：40px；
边界半径：50%；
颜色：白色；
文本对齐：居中；
字体大小：30px；
}
#第二组{
文本对齐：居中；
颜色：白色；
背景色：#33C43C；
宽度：40px；
高度：40px；
边界半径：50%；
字体大小：30px；
}
#第1部分：悬停{
光标：指针；
背景色：#4A6B4C；
}
#第2部分：悬停{
光标：指针；
背景色：#4A6B4C；
}
#div1.op1.change{
背景色：#4A6B4C；
}
/*div1必须更改为此颜色*/

s



M
您的JS代码是正确的。一个好的做法是永远不要在css中使用id，因为id总是唯一的，并且该id的css是不可重用的。我已将您的代码从id更改为类
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    .divclass{ 
      background-color:#33C43C;
      width:40px;
      height:40px;
      border-radius:50%;
      color:white;text-align:
      center;font-size:30px;
    }
    .hoverclass:hover{
       cursor:pointer;
       background-color:#4A6B4C;
    }
    .change{
      background-color:#4A6B4C;
    } 
  </style>
</head>
<body>
  <div id="div1" class="op1 divclass hoverclass">
    S
  </div>
  <br><br>
  <div id="div2" class="op divclass hoverclass">
    M
  </div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>    
    $(document).ready(function(){
      $('#div1').click(function(){
        $('#div1').toggleClass('change'); 
      });  
    });
  </script>
</body>
</html>


.divclass{
背景色：#33C43C；
宽度：40px；
高度：40px；
边界半径：50%；
颜色：白色；文本对齐：
居中；字体大小：30px；
}
.hover类别：hover{
光标：指针；
背景色：#4A6B4C；
}
.改变{
背景色：#4A6B4C；
} 
s



M
$（文档）.ready（函数（）{
$（'#div1'）。单击（函数（）{
$（'#div1'）。toggleClass（'change'）；
});  
});
非常感谢您的帮助，先生：）这是正确的答案。我对这个答案投了赞成票。我认为在css中使用id不是一个好的做法。在css中使用id时，只有有经验的程序员才能找到这个问题。@PawanKumar:很高兴帮助您：）非常感谢您的帮助，先生：）