2010-12-09 202 views
1

我無法隱藏和顯示p標記。有人可以幫我解決這個問題。我在嘗試完成的是 ,當您單擊隱藏按鈕時,內容被隱藏。然後,當您準備好顯示內容時,請點擊顯示按鈕。我知道你可以使用切換,但我不想這樣做,使用jquery顯示/隱藏

<!DOCTYPE html> <!DOCTYPE html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(value){ 
    $("button").click(function(value){ 
    if (value==="hide"){ 
     $("p").hide();} 
    else 
      $("p").show(); 
    }); 
}); 
</script> 
</head> 

<body> 
<h2>This is a heading</h2> 
<p>This is a paragraph.</p> 
<p>This is another paragraph.</p> 
<button value="hide">Hide me</button> 
<button value="show">Show me</button> 
</body> 
</html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(value){ 
    $("button").click(function(value){ 
    if (value==="hide"){ 
     $("p").hide();} 
    else 
      $("p").show(); 
    }); 
}); 
</script> 
</head> 

<body> 
<h2>This is a heading</h2> 
<p>This is a paragraph.</p> 
<p>This is another paragraph.</p> 
<button value="hide">Hide me</button> 
<button value="show">Show me</button> 
</body> 
</html> 
+2

你不能有多個` ID的同名。改爲使用`class` es。 – 2010-12-09 20:55:29

+0

@patrick - 非唯一ID是無效的HTML標記。 – 2010-12-09 20:58:02

回答

4

目前,它不與多個 內容合作。

這是因爲您的頁面上有重複的ID。爲了解決這個問題,用類,並從點擊的錨鎖定下.slickbox格:

$('a.slick-toggle').click(function() { 
    $(this).next("div").find(".slickbox").toggle(400); 
    return false; 
}); 

..和更改ID,以類,如:

<a class="slick-toggle" href="#">Toggle the box</a> 
<div style="position:relative; outline: 1px dashed orange; padding:100px;"> 
    <div class="slickbox" style=" outline: 1px dashed hotpink; background-color:#ccc;position:absolute; top:100px; left: 20px;"> 
     <h2> music nsme</h2> 
     <p>This is the box that will be shown and hidden and togg </p> 
    </div> 
</div>