用jquery点击div点击

我想点击ID为#button的链接时显示id为#flower的div，但它不起作用。下面是我写的代码..我也做了一个jsbin页面，告诉你有什么建议吗？用jquery点击div点击

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

来源

2014-04-09 user3013745

试试这个

<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

来源

2014-04-09 11:13:15

你能解释一下我这是什么功能（E）呢？和preventDefault（）？ – user3013745

e将元素发送到函数，preventDefault（）停止页面。 –

你可以使用下面的修订jQuery来做到这一点，原因你的代码的心不是工作是因为你的链接不必须的idbutton集。

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

})

来源

2014-04-09 11:08:05 SW4

如果我没有错..你需要添加ID到您的按钮，如果（<a ..>Button</a>）是你所谈论的元素。

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


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

与CSS你，我相信你忘了你的<head>部分添加ID到a链接

以及一些更多的东西，

总是加载脚本，你不需要在script标签中添加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>

来源

2014-04-09 11:08:16 bipen

把jQuery库在您的文档的头部分像下面

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
</head>

如果您需要按钮，您可以使用跨度而不是锚点，例如，

<span class="button">Button</span>

再加入少许造型

.button { 
    font-size: 12px; 
    color: #333; 
} 
.button:hover { 
    color: #ddd; 
}

，然后把这个脚本之前</body>标签

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

来源

2014-04-09 11:10:17 mdesdev

你缺少ID #button该链接。

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

来源

2014-04-09 11:10:50

用jquery点击div点击

回答

相关问题