为什么不在jquery上应用CSS属性。单击？
我试图得到它，这样当第一个框被点击时，它的背景颜色变为红色，但它不工作。我试过很多不同的方法，但都不管用！这是我的密码：为什么不在jquery上应用CSS属性。单击？,jquery,html,css,Jquery,Html,Css,我试图得到它，这样当第一个框被点击时，它的背景颜色变为红色，但它不工作。我试过很多不同的方法，但都不管用！这是我的密码： <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#one").click(function(){
$("#one").addClass("open");
});
});
</script>
<style>
.open{
background-color: red;
}
html{
width: 100%;
height: 100%;
margin: 0px;
border: 0px;
}
body{
width: 100%;
height: 100%;
margin: 0px;
border: 0px;
}
#title{
height: 10%;
width: 100%;
background-color: rgba(0, 0, 255, 0.5);
}
h1{
text-align: center;
}
#left{
width: 30%;
height: 100%;
margin-top: 0.5%;
margin-bottom: 0.5%;
position: absolute;
}
#right{
width: 70%;
height: 100%;
margin-top: 0.5%;
margin-bottom: 0.5%;
position: absolute;
margin-left: 30%;
border-left: solid 2px black;
}
.card{
height: 20%;
width: 80%;
margin-left: 10%;
position: absolute;
background-color: blue;
border-radius: 5px;
border: grey solid 2px;
}
.first{
margin-top: 6.5%;
}
#one{
background-color: green;
}
.second{
margin-top: 50%;
}
#two{
background-color: green;
}
#main{
width: 80%;
height: 80%;
margin-left: 10%;
margin-top: 7.5%;
background-color: white;
border-radius: 5px;
border: grey solid 3px;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="title">
<h1>Blah Blah Blah</h1>
</div>
<div id="left">
<div class="card first" id="oneBottom">
</div>
<div class="card first" id="one">
</div>
<div class="card second" id="twoBottom">
</div>
<div class="card second" id="two">
</div>
</div>
<div id="right">
<div id="main">
</div>
</div>
</body>
你的绿色覆盖了它。您可以使.open{background color:red！important；}强制它，但最好将绿色放在从元素中移除的类上！重要的工作，但我相信这是要尽量避免的。Id one的css被优先考虑 使用
请参阅：OP主题可能需要更改。javascript实际上正在工作。
#one.open {
background-color: red;
}