Question

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

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

Answer 1

如果我没错_你需要在你的按钮上添加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，我确定您忘记将{id}添加到a链接

还有更多的事情，

始终在<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>

Answer 2

将jQuery库放在文档的head部分，如下所示

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

如果你需要按钮，你可以使用span而不是锚。例如

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

Answer 3

试试这个

<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

Answer 4

您可以使用下面修订的jQuery来完成此操作，因为您的代码无效，因为您的链接没有设置id button。

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

})

Answer 5

您缺少该链接的ID #button。

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

用Jquery点击显示div

5 个答案: