Question

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

<!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。汉克斯。

Answer 1

以下是您的评论代码。

<!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库 - 使用其中一个 - local（src =“js / jquery.min.js”）或Google中的一个（src =“http://ajax.googleapis.com/ AJAX /库/ jquery的/ 1 / jquery.min.js“）

第三，如果您想使用多个选择器，例如您使用多个ID“链接”，请使用类选择器而不是id。然后在Jquery中使用$（'。link'）选择它。点击.... Google jquery选择器

显示隐藏DIV：jQuery

1 个答案: