使用jquery显示/隐藏
问题描述:
我无法隐藏和显示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>
答
目前,它不与多个 内容合作。
这是因为您的页面上有重复的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>
你不能有多个` ID的同名。改为使用`class` es。 – 2010-12-09 20:55:29
@patrick - 非唯一ID是无效的HTML标记。 – 2010-12-09 20:58:02