使用jQuery单击时显示div
[英]show div on click with Jquery
问题描述
I want to show the div with id #flower when clicking on the link with id #button but it doesnt work. 
当我单击ID为#button的链接时，我想显示ID为#flower的div，但是它不起作用。 Heres is the code i wrote.. i made also a jsbin page to show you any suggestions? 这是我写的代码。.我也做了一个jsbin页面，向您显示任何建议？
http://jsbin.com/xefanaji/3/ 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 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;
}
5 个解决方案
解决方案1
2 2014-04-09 11:08:16
if i am not wrong.. you need to add id to your button ,if ( <a ..>Button</a> ) is the element you are talking about. 如果我没看错..您需要在按钮上添加id，如果（ <a ..>Button</a> ）是您正在谈论的元素。
<div><p><a href="#" id="button">Button</a></p></div>
//-^^^^^^^^^^----here
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
with CSS you have, i am sure you forget to add id to that a link 使用CSS，我确定您会忘记在a链接中添加ID
well few more thing, 好几件事，
always load script in your <head> section, and you don't need to add src in script tag 始终在<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>
解决方案2
1 2014-04-09 11:10:17
Put the jQuery library in the head section of your document like below 将jQuery库放在文档的开头部分，如下所示
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
If you need button you can use span instead of anchor eg 如果您需要按钮，则可以使用跨度代替锚点，例如
<span class="button">Button</span>
then add a little styling 然后添加一些样式
.button {
font-size: 12px;
color: #333;
}
.button:hover {
color: #ddd;
}
and then put this script just before </body> tag 然后将此脚本放在</body>标记之前
<script>
$(function() {
$(".button").click(function () {
$("#flower").show("slow");
});
});
</script>
解决方案3
1 已采纳 2014-04-09 11:13:15
Try this 尝试这个
<div id="front">
<div><p><a id="button" 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"></script>
<script>
$(document).ready(
function(){
$("#button").click(function (e) {
e.preventDefault();
$("#flower").show("slow");
});
});
</script>
解决方案4
0 2014-04-09 11:08:05
You could use the revised jQuery below to accomplish this, the reason your code isnt working is because your link doesnt have the id button set. 您可以使用下面的修订版jQuery完成此操作，原因是您的代码无法正常工作是因为您的链接未设置id button 。
$('#front a:first').on('click',function(e){
e.preventDefault();
$('#flower').show();
})
解决方案5
0 2014-04-09 11:10:50
您缺少该链接的ID #button 。
<a id="button" href="">Button</a>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.