使用jquery显示和隐藏div在我的代码中没有用

时间:2014-05-10 08:17:42

标签: jquery html

您好我的代码在单击按钮时似乎无法正常工作但div不会隐藏/显示,是否存在我可能错误输入或错误代码的内容?谢谢您的帮助,等待帮助。

如果还有更多其他简单的显示/隐藏方法可以在此实现,那么随时发表评论

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{
background-color:#999;  
}
#container{
width:580px;
height:200px;
margin:20px auto;
background-color:#F0F;
border-radius:0.9em;    
}
#container1{
width:580px;
height:200px;
margin: 20px auto;
background-color:#0FF;
border-radius:0.9em;    
}
#menu{
width:580px;
background-color:#FF3;
border-radius:0.9em;
margin:auto;    
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){    
$("#container").toggle();
});
$(".btn2").click(function(){
$("#container1").toggle();
});
});
</script>
</head>
<body>
<div id="menu" align="center">
<button class="btn1">SHOW1</button>
<button class="btn2">SHOW2</button>
</div>
<div id="container">
</div>
<div id="container1">
</div>
</body>
</html>

3 个答案:

答案 0 :(得分:2)

尝试添加此内容:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

答案 1 :(得分:2)

在此处查看Fiddle

您需要添加适当的Jquery link

添加此

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

答案 2 :(得分:0)

我认为这段代码可以帮助你

这是从您的代码

完成的示例

http://jsfiddle.net/2Amgm/

 $(".btn1").on("click",function(){
    $("#container").toggle();
    });

  $(".btn2").on("click",function(){
    $("#container1").toggle();
    });