göster sakla DIV'leri: jQuery

İki bağlantıları I/gösterdiğimiz bir teker teker gizlemek istediğiniz & var benim kodudur:göster sakla DIV'leri: 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>

varsayılan olarak ilk div beni gösterilen gerekir. hanks.

kaynak

2010-05-21 PHP Ferrari

Sorununuz nedir? –

kimlikleri DOM içinde benzersiz olmalıdır. Bunun yerine bir sınıf adı kullanın. – jAndy

Yorumunuz olan kodunuz.

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

Açıklamalar:

İlk - id benzersiz tanıtıcı olmalıdır, bu yüzden link1 ve LINK2 için kimliklerini değiştirdi.

İkincisi 2 jquery kitaplığı eklemenize gerek yok - bunlardan birini kullanın - local (src = "js/jquery.min.js") veya Google'dan biri (src = "http://ajax.googleapis.com lütfen 'id yerine sınıf seçici kullanmak "Sen birden kimliği ile bunu yaptı gibi birden seçiciler kullanmak isterseniz)

Üçüncü' /ajax/libs/jquery/1/jquery.min.js. Daha sonra Jquery'de $ ('.' Link ') kullanarak seçin. Tıklayın .... Google jQuery selektörleri

kaynak

2010-05-21 10:16:52

göster sakla DIV'leri: jQuery

cevap

İlgili konular