logo标签列表

显示/隐藏DIV：jQuery

jquery
5

我有两个链接，我想逐个显示/隐藏它们，我的代码如下：

<!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。谢谢。
6
在DOM中，ID必须是唯一的。请使用类名代替。 - jAndy
1个回答
2

这是您的带有注释的代码。

<!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应该是唯一标识符，所以我将ids更改为link1和link2。

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

第三，如果您想使用多个选择器，就像您使用多个id“link”一样，请改用类选择器。然后在Jquery中，您可以使用$('.link').click....进行选择。请参考Google jquery选择器。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接