Visualizzazione dei risultati da 1 a 9 su 9
  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2002
    Messaggi
    146

    contenuto ajax con effetto fade+slide

    Presupposto che non sono un programmatore... cercando qua e là sono arrivato a questo risultato che potete vedere qui...

    index.html

    codice:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    	<head>
    		
            <title>Prova</title>
    		
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		
    		<style type="text/css">
    			
    			body { margin: 20; padding: 0; background-color: #fff; }
    			ul li a { color:#000; text-decoration:none; }
    			ul li a:hover {background:#000; color:#fff; text-decoration:none; }
    			ul li a.active {background:#000; color:#fff; text-decoration:none; }   
    		
            </style>
    		
    		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
            
    		<script type="text/javascript">
    		
    			$(document).ready(function(){
    				
    				$('.vedi').click(function(){
    					
    					var href = $(this).attr('href');
    					
    					if ($('#content').is(':visible')) {
    						
    						$('#content').css('display','block').animate({height:'0px'}).empty();
    						
    					}
    					
    					$('#content').css('display','block').animate({height:'150px'},function(){
    						
    						$('#content').load('content.html #'+href );
    						
    					});
    					
    					return true;
    					
    				});
    				
    				
    			});
    			
    		</script>
            
    	</head>
    	
        <body>
        
            <div id="content"></div>
        
            <ul>
                [*]Uno[*]Due[*]Tre
                [/list]
            
    	</body>
        
    </html>
    content.html

    codice:
    <div id="uno">Contenuto 1</div>
    <div id="due">Contenuto 2</div>
    <div id="tre">Contenuto 3</div>

    ora vorrei fare in modo che i link del listato resti in stato "active" fin quando non viene cliccato un'altro link...

    le ho provate tutte ma non trovo niente che funzioni... credo sia una cavolata ma non so dove sbattere la testa... qualcuno è così gentile di darmi un aiuto?

    grazie...
    francesco

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    active è css cosa centra con js?
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    Mar 2002
    Messaggi
    146
    vorrei che js attivasse la classe css "active" sul link cliccato...

    se clicco sul primo link mi rimane "active" il pulsante "Uno"... se successivamente clicco il secondo link mi disattiva "active" sul pulsante "Uno" e me lo attiva su "Due"... e così via...

    spero di essermi spiegato bene...

  4. #4
    Utente di HTML.it
    Registrato dal
    Mar 2002
    Messaggi
    146
    nessuna soluzione?

  5. #5
    Perdonami ma non ho capito.
    Vuoi che, al momento in cui giunge un click ad uno dei link con classe "vedi", essi si trasformino in link con classe "active"?

  6. #6
    Utente di HTML.it
    Registrato dal
    Mar 2002
    Messaggi
    146
    esatto... devo poter evidenziare il link corrente... se visualizzo "Contenuto1" deve rimanere selezionato il link "Uno"... se visualizzo "Contenuto2" deve rimanere selezionato il link "Due"... e così via...

  7. #7
    All'interno di $(".vedi").click puoi inserire:
    $(this).removeClass('vedi').addClass('active');

    Spero di aver colto il tuo problema.

  8. #8
    Utente di HTML.it
    Registrato dal
    Mar 2002
    Messaggi
    146
    pultroppo no... così facendo mi rimangono poi tutti accesi (vedi ora la pagina che avevo linkato al post)... http://www.lanzavecchia.it/prova/

  9. #9
    Utente di HTML.it
    Registrato dal
    Mar 2002
    Messaggi
    146
    l'ho aggiustata aggiungendo al js....

    codice:
    if (href=='#uno') {
        				
    $('.uno').addClass('active');
    $('.due').removeClass('active');
    $('.tre').removeClass('active');
    					
    }
    					
    if (href=='#due') {
        				
    $('.uno').removeClass('active');
    $('.due').addClass('active');
    $('.tre').removeClass('active');
    					
    }
    					
    if (href=='#tre') {
        				
    $('.uno').removeClass('active');
    $('.due').removeClass('active');
    $('.tre').addClass('active');
    					
    }
    e all'html

    codice:
    [*]Uno[*]Due[*]Tre
    un po' macchinoso ma funziona...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.