格显示基于按钮

测试按钮的第一组（“表现出来”和“隐藏”）工作的伟大。我一直在尝试获得第二组按钮（“有它”和“需要它”）以对div做同样的事情。不工作。有什么建议么？另外，如果那里有一个更有效的方式做到这一点...

这里从小提琴代码：

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

来源

2011-11-19 user791187

应该是div#have代替div.have，因为你的div有have，一个id不是have。

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

来源

2011-11-19 00:50:35

这里是工作提琴：

http://jsfiddle.net/SfXVA/

您使用的ID的第二2个的div，因此，你需要用＃（如果是ID）中引用它们来代替。（用于课程）在您的选择器中。

[编辑]

此外，你不需要做“格＃有”，只是“#have”就足够了，因为ID的应该是在DOM独特。

来源

2011-11-19 00:52:21

格显示基于按钮

回答

相关问题