show hide: DIVs jQuery

J'ai deux liens & Je veux montrer/cacher les un à la fois, mon code est:show hide: DIVs 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>

par défaut première div doit me montrer. écheveaux.

Source

2010-05-21 PHP Ferrari

Quel est votre problème? –

Les identifiants doivent être uniques dans le DOM. Utilisez un nom de classe à la place. – jAndy

Voici votre code avec commentaires.

<!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>

Remarques:

premier - id doit être un identifiant unique, donc je l'ai changé ids link1 et lien2.

Deuxième Pas besoin d'inclure 2 bibliothèques jquery - utilisez l'une d'entre elles - local (src = "js/jquery.min.js") ou une de Google (src = "http://ajax.googleapis.com /ajax/libs/jquery/1/jquery.min.js ")

Troisième Si vous souhaitez utiliser plusieurs sélecteurs, comme Vous l'avez fait avec plusieurs ID" link ", utilisez le sélecteur de classes au lieu de id. Ensuite, dans Jquery, vous sélectionnez celui en utilisant $ ('. Link'). Cliquez sur .... Google jquery selectors

Source

2010-05-21 10:16:52

show hide: DIVs jQuery

Répondre

Questions connexes