我在下面有一个 jsfiddle:
第一组测试按钮(“显示”和“隐藏”)效果很好。我一直在尝试让第二组按钮(“拥有”和“需要”)用 div 做同样的事情。不工作。有什么建议么？另外，如果有更有效的方法来做到这一点......
这里是 fiddle 的代码:
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button class="1">Show it</button>
<button class="2">Hide it</button>
<p style="display: none" class="1">Hello</p>
<p style="display: none" class="2">Un Hello!</p>
<script>
$("button.1").click(function () {
$("p.1").show("slow");
$("p.2").hide("fast");
});
</script>
<script>
$("button.2").click(function () {
$("p.1").hide("fast");
$("p.2").show("slow");
});
</script>
<button class="have">Have</button>
<button class="need">Need</button>
<div id="have" style="display: none">HAVE YO</div>
<div id="need" style="display: none">NEED YO</div>
<script>
$("button.have").click(function () {
$("div.have").show("slow");
$("div.need").hide("fast");
});
</script>
<script>
$("button.need").click(function () {
$("div.need").show("slow");
$("div.have").hide("fast");
});
</script>
</body>
</html>
最佳答案
应该是 div#have 而不是 div.have，因为你的 div 有 have 的 id，而不是 的类>有。
<script>
$("button.have").click(function () {
$("div#have").show("slow");
$("div#need").hide("fast");
});
</script>
<script>
$("button.need").click(function () {
$("div#need").show("slow");
$("div#have").hide("fast");
});
</script>
关于javascript - 基于按钮的div显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8190958/