显示隐藏div:jQuery_Jquery - Fatal编程技术网

显示隐藏div:jQuery

jquery

显示隐藏div:jQuery,jquery,Jquery,我有两个链接&我想一次显示/隐藏一个，我的代码是： <!DOCTYPE html> <html> <head> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.js"></scri

我有两个链接&我想一次显示/隐藏一个，我的代码是：

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script type="text/javascript" src="js/jquery.js"></script>          
 <script type="text/javascript">                                         
   // we will add our javascript code here    
   $(document).ready(function() {
       $(function(){
           $('#link').click(function(){
           $('#colorDiv').slideToggle('slow');
            return false;
          });
        });
 });
 </script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
 #dv {
  width:100px;
  height:100px;
  border:1px solid;
}
</style>
</head>
<body>
<table cellspacing="2">
    <tr><td><a href="#" id="link">Color</a></td><td><a href="#" id="link">Car</a></td></tr>
    <tr><td><div id="colorDiv">Red</div></td><td><div id="carDiv">PRADO</div></td></tr>
</table>
</body>
</html>


//我们将在这里添加javascript代码
$（文档）.ready（函数（）{
$（函数（）{
$（“#链接”）。单击（函数（）{
$（'colorDiv'）。滑动切换（'slow'）；
返回false；
});
});
});
JS-Bin
#dv{
宽度：100px；
高度：100px；
边框：1px实心；
}
雷德普拉多

默认情况下，应显示第一个div。

汉克斯

这是带注释的代码

<!DOCTYPE html> 
<html> 
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<style>
#carDiv {
display: none; /* set initial carDiv visibility to hide */
} 
</style>
<style>
 #dv { 
  width:100px; 
  height:100px; 
  border:1px solid; 
} 
</style>
 <script type="text/javascript" src="js/jquery.min.js"></script>           
 <script type="text/javascript">
$(document).ready(function() {
  $('#link1').click(function(){ 
       $('#colorDiv').slideToggle('slow'); 
        return false; 
      }); 
 $('#link2').click(function(){ 
       $('#carDiv').slideToggle('slow'); 
        return false; 
      });     
  }) 
 </script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
</head> 
<body> 
<table cellspacing="2"> 
<tr><td><a href="#" id="link1" class="link">Color</a></td><td><a href="#" id="link2" class="link">Car</a></td></tr> 
    <tr><td><div id="colorDiv">Red</div></td><td><div id="carDiv">PRADO</div></td></tr> 
</table> 
</body> 
</html>


#加的夫{
显示：无；/*将初始carDiv可见性设置为隐藏*/
} 
#dv{
宽度：100px；
高度：100px；
边框：1px实心；
} 
$（文档）.ready（函数（）{
$（'#link1'）。单击（函数（）{
$（'colorDiv'）。滑动切换（'slow'）；
返回false；
}); 
$（'#link2'）。单击（函数（）{
$（'carDiv'）。滑动切换（'slow'）；
返回false；
});     
}) 
JS-Bin
雷德普拉多

备注:

First-id应该是唯一的标识符，所以我将id更改为link1和link2

第二，不需要包含2个jquery库-使用其中一个本地（src=“js/jquery.min.js”）或一个来自Google（src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js））

第三，如果您想使用多个选择器，就像您使用多id“链接”时那样，请使用类选择器而不是id。然后在Jquery中使用$（'.link'）选择它。单击。。。。

Google jquery选择器

ID在DOM中必须是唯一的。改用类名。