用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點擊

回答

相關問題