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. Heres is the code i wrote.. i made also a jsbin page to show you any suggestions?

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;   
        }

回答1:

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>

DEMO

回答2:

if i am not wrong.. you need to add id to your button ,if (<a ..>Button</a>) is the element you are talking about.

<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

well few more thing,

always load script in your <head> section, and you don't need to add src in script tag

<!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>

回答3:

Put the jQuery library in the head section of your document like below

<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 e.g.

<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

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

回答4:

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.

$('#front a:first').on('click',function(e){
  e.preventDefault();
  $('#flower').show();

})

回答5:

You are missing id #button for that link.

<a id="button" href="">Button</a>

来源：https://stackoverflow.com/questions/22960626/show-div-on-click-with-jquery

标签

javascript

jquery

html

css