jquery之显示隐藏 DIV : 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"></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> 

默认情况下应该显示第一个 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>  

备注:

首先 - 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“link”那样，请使用 类选择器而不是 id。然后在 Jquery 中使用 $('.link').click... 选择它 Google jquery 选择器