我试图在单击时弹出一个框。这是框的 HTML:
<div id="content_1">
<p>Hello</p>
<p>Please push the button</p>
<p><input type="button" id="go_button" value="Go"/> </p>
</div>
<div id="box">
<p>hello</p>
</div>
这是 JavaScript 和 CSS:
$(document).ready(function() {
$("#content_2").on("click",function(){
.css("z-index",3);
}
}
以下是样式,以备不时之需:
#go_button {
}
#content_1 {
margin:20px auto;
position:fixed;
width:1000px;
text-align:center;
border:1px solid #d0d0d0;
box-shadow:1px 1px 5px #aaa;
border-radius:15px;
background:#99FF99;
z-index:3;
}
#box {
position:fixed;
top:100px;
left:300px;
z-index:1;
width:600px;
height:300px;
background:green;
}
body {
background:#f7f7f7;
}
最佳答案
你不能在没有任何东西启动的情况下调用一个方法链。我们在您的标记中没有看到 ID 为 content_2
的元素。也许您的意思是将其应用于 #content_1
。
$(document).ready(function() {
$("#content_2").on("click",function(){
// Apply to this
$(this).css("z-index",3);
});
});
如果要将 CSS 应用于其他元素而不是 content_2
(this
),请改用其选择器。
$(document).ready(function() {
$("#content_2").on("click",function(){
$('#box').css("z-index",3);
});
});
请注意,除非您指定了 position: absolute
或 position: fixed
,否则 z-index
不会有任何效果。
关于javascript - 为什么我的 JavaScript 中的 CSS 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11314217/