problema con i Tabs di una tabella

[fradamma]

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 Grazie anticipatamente. Vi posto il codice:

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>

 

[criric]

Ti sei lasciato prendere la mano Hai scritto e ripetute le stesse istruzioni troppe volte
basta cosi

$(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]

Ti sei lasciato prendere la mano Hai scritto e ripetute le stesse istruzioni troppe volte
basta cosi

$(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]

Io ho provato cosi e funziona

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

ok ho provato e va benissimo!!! ti ringrazio! probabilmente avevo sbagliato qualcosa