problema con i Tabs di una tabella

fradamma

Utente Attivo
28 Set 2012
93
0
0
Ciao a tutti,
ho un problema con una tabella orizzontale formata da 8 tabs creata in js. Il problema è semplice: se clicco sul link di uno dei tab va tutto bene, cliccando più volte succede che mi visualizza più tab contemporaneamente, uno sotto l'altro. La cosa chiaramente non deve capitare in quanto deve visualizzare un tab per volta (quello cliccato). Come posso risolvere? sicuramente c'è un passaggio che salto. E' sicuramente una fesseria ma abbiate pazienza, sono un novizio di js :D Grazie anticipatamente. Vi posto il codice:
HTML:
JAVASCRIPT - JQUERY

		$(document).ready( function() {
			$('.tabs a').each( function() {
					$(this).click( function() {
						$('.tab-content').fadeIn("slow").hide();;
						var tabSelector = $(this).attr('tabSelector');
						$('#' + tabSelector).show();
					});
				});
	         	}); 

		// script per aggiungere-rimuovere la classe "activeTab" sul tab
		  
		  $(document).ready( function() {
		  	$(".tabs a").click( function() {
					$(".tabs a").removeClass("activeTab");
					$(this).addClass("activeTab");
			});
		   });

HTML

		<div class="tabs">
			<ul class="tab-menu" >
				<li><a href="javascript:{}" class="activeTab" tabSelector="tab1">TAB1</a></li>
			        <li><a href="javascript:{}" tabSelector="tab2" >TAB2</a></li>
				<li><a href="javascript:{}" tabSelector="tab3" >TAB3</a></li>
				<li><a href="javascript:{}" tabSelector="tab4" >TAB4</a></li>
				<li><a href="javascript:{}" tabSelector="tab5" >TAB5</a></li>
				<li><a href="javascript:{}" tabSelector="tab6" >TAB6</a></li>
				<li><a href="javascript:{}" tabSelector="tab7" >TAB7</a></li>
				<li><a href="javascript:{}" tabSelector="tab8" >TAB8</a></li>
			</ul>
		</div>
					
								
					<div class="tab-content activeTab" id="tab1">
						
					</div>
					
					<div class="tab-content" id="tab2" >
						
					</div>
					
					<div class="tab-content" id="tab3" >
					
					</div>
					
					<div class="tab-content" id="tab4" >
						
					</div>
					
					<div class="tab-content" id="tab5" >
						
					</div>
					
					<div class="tab-content" id="tab6" >
						
					</div>
					
					<div class="tab-content" id="tab7" >
					
					</div>
					
					<div class="tab-content" id="tab8" >
				
					</div>
 
Ultima modifica di un moderatore:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ti sei lasciato prendere la mano Hai scritto e ripetute le stesse istruzioni troppe volte
basta cosi
Codice:
$(document).ready( function() {
        $('.tab-content').hide();
        $('.tabs a').click( function() {   
            var tabSelector = $(this).attr('tabSelector');
            $(".tabs a").removeClass("activeTab");
            $(this).addClass("activeTab");
            $('.tab-content').hide();
            $('#' + tabSelector).fadeIn("slow");            
        });
    });
se hai bisogno te lo commento
 

fradamma

Utente Attivo
28 Set 2012
93
0
0
Ti sei lasciato prendere la mano Hai scritto e ripetute le stesse istruzioni troppe volte
basta cosi
Codice:
$(document).ready( function() {
        $('.tab-content').hide();
        $('.tabs a').click( function() {   
            var tabSelector = $(this).attr('tabSelector');
            $(".tabs a").removeClass("activeTab");
            $(this).addClass("activeTab");
            $('.tab-content').hide();
            $('#' + tabSelector).fadeIn("slow");            
        });
    });
se hai bisogno te lo commento


Niente da fare, ora il problema è che non mi cambia nemmeno il tab ma mi visualizza soltanto il primo senza possibilità di cambio... :(
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Io ho provato cosi e funziona
HTML:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $(document).ready( function() {
        $('.tab-content').hide();
        $('.tabs a').click( function() {   
            var tabSelector = $(this).attr('tabSelector');
            $(".tabs a").removeClass("activeTab");
            $(this).addClass("activeTab");
            $('.tab-content').hide();
            $('#' + tabSelector).fadeIn("slow");            
        });
    });
</script>

<div class="tabs">
    <ul class="tab-menu" >
        <li><a href="javascript:{}" class="activeTab" tabSelector="tab1">TAB1</a></li>
        <li><a href="javascript:{}" tabSelector="tab2" >TAB2</a></li>
        <li><a href="javascript:{}" tabSelector="tab3" >TAB3</a></li>
        <li><a href="javascript:{}" tabSelector="tab4" >TAB4</a></li>
        <li><a href="javascript:{}" tabSelector="tab5" >TAB5</a></li>
        <li><a href="javascript:{}" tabSelector="tab6" >TAB6</a></li>
        <li><a href="javascript:{}" tabSelector="tab7" >TAB7</a></li>
        <li><a href="javascript:{}" tabSelector="tab8" >TAB8</a></li>
    </ul>
</div>
<div class="tab-content activeTab" id="tab1">
    TAB 1
</div>
<div class="tab-content" id="tab2" >
    TAB 2
</div>
<div class="tab-content" id="tab3" >
    TAB 3
</div>
<div class="tab-content" id="tab4" >
    TAB 4
</div>
<div class="tab-content" id="tab5" >
    TAB 5
</div>
<div class="tab-content" id="tab6" >
    TAB 6
</div>
<div class="tab-content" id="tab7" >
    TAB 7
</div>
<div class="tab-content" id="tab8" >
    TAB 8
</div>
sicuro di aver trascritto bene il codice?
 

fradamma

Utente Attivo
28 Set 2012
93
0
0
ok ho provato e va benissimo!!! ti ringrazio! probabilmente avevo sbagliato qualcosa ;)
 
Discussioni simili
Autore Titolo Forum Risposte Data
T PROBLEMA CON SESSIONI PHP 3
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
G Problema con Get page PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 1
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
T problema con select dinamica con jquery Javascript 0
S Problema con spazi bianchi HTML e CSS 5
A PROBLEMA: insert mysqli con dati Tagsinput Presentati al Forum 0
Tommy03 Problema con z-index HTML e CSS 3
M Problema inserimento parole con apostrofo nel db PHP 5
C Problema con dati meteo xml XML 1
S Problema con infrarossi videocamera IP Cam e Videosorveglianza 1
V Problema con librerie allegro5 c++ C/C++ 1
M Problema con php per calcolo costo percentuale PHP 7
S Problema con mysqli_num_rows PHP 18
grgfede Problema javascript con aruba Javascript 1
M Problema con visibility e radio button Javascript 2
Marti1! Problema con casella mail cancellata Posta Elettronica 3
L [PHP] Problema con Telegram PHP 1
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
S Strano problema con i title su Google SEO e Posizionamento 3
P [ASP.Net] Problema ERR_INCOMPLETE_CHUNKED_ENCODING 206 (Partial Content) con Font ASP.NET 4
P [HTML] Problema ERR_INCOMPLETE_CHUNKED_ENCODING 206 (Partial Content) con Font HTML e CSS 1
N [Apache] problema con estensione php Apache 0
C [PHP] Problema con download file PHP 0
M [PHP] Problema con preg_match PHP 1
gandalf1959 [PHP] problema con l'utilizzo di Header PHP 3
M [PHP] Problema con query select PHP 2
S [Javascript] Problema con condizione "if" Javascript 2
K Problema di indicizzazione con dominio vecchio vuoto SEO e Posizionamento 2
M [WordPress] Problema con pagina prodotti WordPress 0
Giacomo Boccherini Problema trasferimento file con FileZilla Windows e Software 10

Discussioni simili