gpt4 book ai didi

javascript - 使用 Jquery 在点击时显示 div

转载 作者:太空宇宙 更新时间:2023-11-03 21:41:53 24 4
gpt4 key购买 nike

我想在单击带有 id #button 的链接时显示带有 id #flower 的 div,但它不起作用。这是我写的代码..我还制作了一个jsbin页面给你看有什么建议吗?

http://jsbin.com/xefanaji/3/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>


<div id="front">
<div><p><a href="">Button</a></p></div>
</div>
<div id="flower">
<img src="http://2.bp.blogspot.com/-Gaz8V9dP5O0/UUjtKJPofuI/AAAAAAAALDQ/boET2Ns34aU/s320/blooming-flowers-35.jpg" alt="flower"/>

</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});

});
</script>

</body>
</html>

CSS

#button{
position:relative;
height:30px;
width:60px;
background-color:lightyellow;
left:40px;
top:40px;
}
#flower{

display:none;
position:relative;
top:-600px;
left:50px;
z-index:0;
}

#front {
z-index:1;
position:relative;
top:100px;
height:600px;
width:100%;
background-color:lightblue;
}

最佳答案

如果我没记错的话.. 如果 ( <a ..>Button</a> ) 是您正在谈论的元素,您需要将 id 添加到您的按钮。

<div><p><a href="#" id="button">Button</a></p></div>
//-^^^^^^^^^^----here


$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});

有了 CSS,我敢肯定你忘了给 a 添加 id链接

还有一些东西,

始终在您的 <head> 中加载脚本节,你不需要在脚本标签中添加 src

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
....
....

<script>
$(document).ready(
function(){
$("#button").click(function () {
$("#flower").show("slow");
});

});
</script>

关于javascript - 使用 Jquery 在点击时显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22960626/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com