jQuery Italia - Forum » Supporto ed Aiuto » Problemi con jQuery

chiusura div aperti

(2 articoli)

  1. giormagno
    Membro

    Ciao ragazzi,
    vi descrivo quello che vorrei fare.. un menù con 3 voci, associate a tre div diversi (bottone1-->div1 bottone2-->div2 bottone3-->div3)
    Il sito deve iniziare con il div1 che appare in automatico.
    Quando clicco sul bottone2 si deve chiudere il div aperto (div1) e si deve aprire il div2. Così anche per il div3. Ho provato con .toggle ma nn mi da risultati, in quanto mi mette i div uno sotto l'altro senza chiudermi quello precedentemente aperto.. che funzione dovrei utilizzare??

    Pubblicato 7 months fa #

  2. jqueryitalia
    Amministratore

    Ciao giormagno e benvenuto.

    Questa potrebbe essere una possibile soluzione:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<style type="text/css">
	a {font-size:12px;font-family:Arial,Helvetica,sans-serif;padding-right:20px;}
	.container{float:left;width:180px;height:170px;margin:20px;border:1px solid #c8c8c8;text-align:center;font-size:20px;padding-top:100px}
	#cont1 {background:#ffffff}
	#cont2 {background:#ff0000}
	#cont3 {background:#ff9900}
	#cont2, #cont3 {display:none;}
	</style>
	<script type="text/javascript">
	<!-- //
		$(document).ready(function() {
			$('#open1').click(function() {
				$('.container').css({'display':'none'});
				$('#cont1').css({'display':'block'});
			});
			$('#open2').click(function() {
				$('.container').css({'display':'none'});
				$('#cont2').css({'display':'block'});
			});
			$('#open3').click(function() {
				$('.container').css({'display':'none'});
				$('#cont3').css({'display':'block'});
			});
		});
	// -->
 	</script>
</head>
<body>
	<div id="menu"><a href="javascript:;" id="open1">Apri CONT1</a><a href="javascript:;" id="open2">Apri CONT2</a><a href="javascript:;" id="open3">Apri CONT3</a></div>
	<div class="container" id="cont1">
	1
	</div>
	<div class="container" id="cont2">
	2
	</div>
	<div class="container" id="cont3">
	3
	</div>
</body>
</html>
    Pubblicato 7 months fa #

RSS feed for this topic

Replica

Devi aver fatto il login per poter pubblicare articoli.