Probelma con TAB CSS

**carmalao** · 12-04-2012, 16:34

Buon giorno a tutti.
Sono novizio ed autodidatta.
L'argomento è tab con css.
Dopo aver vagliato vari script e css e dopo averne assemblato uno da vari, ora sto faticosamente cercando di uscire dal problema che il tab css non mi mostra il contenuto della prima tab al caricamento della pagina.
Mi date gentilmente una mano?
Chiedo scusa se non pongo l'argomento come vorreste voi.......

Qui trovate la pagina di prova: http://www.scopricormons.it/schedatipo/schedatipo3.html

Questo è il tabsfunctions.js per lo switch delle tab:

codice:

function tabSwitch(new_tab, new_content) {
 document.getElementById('content_1').style.display = 'none';
 document.getElementById('content_2').style.display = 'none';
 document.getElementById('content_3').style.display = 'none';
 document.getElementById(new_content).style.display = 'block';
 document.getElementById('tab_1').className = '';
 document.getElementById('tab_2').className = '';
 document.getElementById('tab_3').className = '';
 document.getElementById(new_tab).className = 'active';
}

Questa è la porzione finale di styles.css riguardante le tab:

codice:

#tot{
                width: 630px;
                margin: 50px auto 0px auto;
		font-family: Arial, Helvetica, sans-serif; font-size: 14px;
	    }
            
            #headertab{
		list-style: none;
                width: 100%;
                height: 30px;
                float: left;
            }
            
            #contenttab{ clear: both; overflow: hidden;
                width: 100%;
                height: auto;
                float: left;
                border: 1px solid silver;
                background-color: #efefef;
		color: #222;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		padding: 25px;
		line-height: 20px;
            }
            
            .tabs-header{
                list-style: none;
                margin: 0px;
                padding: 0px;
		float: left;
            }
             
            .tabs-header li{
		background-color: #dedede;
		list-style: none;
                width: 150px;
		height: 30px;
		float:left;
      		margin: 0 0px;
		display: block;
                line-height: 30px;
                text-align: center; 
		font-size: 14px;
		font-weight: bold;
		text-decoration: none;
                border-top: 1px solid silver; 
                border-left: 1px solid silver; 
                border-right: 1px solid silver;
            }   
            
	    .tabs-header li a {
		background-color: #efefef;
		color: #222;
		font-weight: bold;
		text-decoration: none;
		width: 150px;
		height: 30px;
		display: block;
		float: left;
		line-height: 30px;
		text-align: center;
	    }
	    
	    .tabs-header li a:active{
		background-color: #dedede;
	    }

	    .tabs-header li a:hover{
		background-color: #dedede;
	    }
            
            .tabss{
                width: 100%;
                float: left;
                display: none;
            }

Questo è la parte di html relativa alle tab:

codice:

<div id="tot">
	      <div id="headertab">
		<ul class="tabs-header">
		[*]Descrizione
		[*]Immagini
		[*]Offerte
		[/list]
	      </div>
	      <div id="contenttab">
		<div class="tabss" id="content_1">
		<h1>Descrizione</h1>
		

Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>

		

Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>

		

Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>

		

Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>

		

Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>

		

Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>

		

Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>

		</div> 
		<div class="tabss" id="content_2">
		<h1>Immagini</h1>
			  
			  
			  
			  
			  
			  
		</div>
		<div class="tabss" id="content_3">
		<h1>Offerte</h1>
		

Urna justo quam nunc urna sem facilisis nibh Curabitur tellus quis. Orci sem ligula platea parturient justo Morbi id cursus tortor adipiscing. Tortor convallis pede orci Quisque id Nam condimentum sed eu Sed. Cum orci Quisque vitae egestas vitae nulla Cum fermentum egestas ante. Congue eu elit.</p>
		</div> 
	      </div> 
	      </div>

Ringrazio tutti coloro che mi daranno una mano.

**carmalao** · 13-04-2012, 16:21

Ciao a tutti.
Nel frattempo, ho trovato un altro script (se può servire a qualcuno: http://reignwaterdesigns.com/ad/tidbits/tabs/ ) e lo ho adattato alle mie esigenze.
Ora ottengo quanto ottenevo prima ed in più al caricamente mi mostra il contenuto ma di TUTTE le 3 tab!!!!!!!
Non riesco a venirne fuori.
Mi date una mano?

Pagina di test: http://www.scopricormons.it/schedatipo/schedatipo4.html

Eccovi il codice js:

codice:

/*
Author: Addam M. Driver
Date: 10/31/2007
*/

/* BEGIN: [Tab Switch Function] */
function tabSwitch(me){
	me.className = me.className.replace("_off","_on"); // set the tab to "On"
	for(i=0; i<me.parentNode.childNodes.length; i++){  // cycle through the tags in the containing node of this anchor						
		if(me.parentNode.childNodes[i].title != me.title){ // look for everthing that isn't the anchor you just changed
		
			if(me.parentNode.childNodes[i].className == me.className){ // find the class name that matches the current class name
				me.parentNode.childNodes[i].className = me.parentNode.childNodes[i].className.replace("_on","_off"); // Turn them all "Off"
			}
			
			if(me.parentNode.childNodes[i].title == me.title+"_Data"){  // find the associated "Data" with the user picked (related by titles)
				me.parentNode.childNodes[i].style.display = "block"; // display the data
			}else if(me.parentNode.childNodes[i].title){ // find all of the other "Data" related to tabs
				
				if(me.parentNode.childNodes[i].title.search("_Data") != -1){ // filter out the one that matches the one the user picked
					me.parentNode.childNodes[i].style.display = "none"; // "hide" the other related data
				}	
			}			
		}
	}
}
/* END: [Tab Switch Function] */

Questa è la pagina web di test:

Questo è il codice CSS da me modificato (dove presumibilmente risiede l'errore):

codice:

.teamGameLeadersHolder{      /*generale*/
  width:630px;
  margin:50px auto 0px auto;
  font-family: Arial, Helvetica, sans-serif; font-size: 14px;
}

.teamGameLeadersHolder .tgl{      /*contenuti*/
  width:100%;
  height: auto;
  float:left;
  border: 1px solid silver;
  background-color: #efefef;
  clear:both;
  overflow: hidden;
  font-size:12px;
  line-height: 20px;
  color: #222;
  padding:25px;
  }

.teamGameLeadersHolder .gl_on,
.teamGameLeadersHolder .gl_off{      /*menu off*/
  list-style: none;
  background-color: #efefef;
  color: #222;
  display: block;
  float:left;
  width:150px;
  height:30px;
  text-align:center;
  text-decoration:none;
  margin-left:0px;
  padding: 0px;
  line-height: 30px;
  border-top: 1px solid silver; 
  border-left: 1px solid silver; 
  border-right: 1px solid silver;
}

.teamGameLeadersHolder .gl_on{      /*menu on*/
  background-color: #dedede;
  color: #222;
  font-weight: bold;
}

.teamGameLeadersHolder .gl_off{
  background-color: #efefef;
  color: #222;
  font-weight: none;
}

E questa è la porzione di html:

codice:

<div class="teamGameLeadersHolder">
		Descrizione
		Immagini
		Offerte

		<div class="tgl" title="Descrizione_Data">
		<h1>Descrizione</h1>
		

Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>

		

Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>

		

Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>

		

Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>

		

Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>

		

Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>

		

Lorem ipsum dolor sit amet consectetuer ac quis dui mauris iaculis. Congue Vestibulum wisi tellus a Curabitur laoreet dui orci.</p>

		</div> 

		<div class="tgl" title="Immagini_Data">
		<h1>Immagini</h1>
			  
			  
			  
			  
			  
			  
		</div>

		<div class="tgl" title="Offerte_Data">
		<h1>Offerte</h1>
		

Urna justo quam nunc urna sem facilisis nibh Curabitur tellus quis. Orci sem ligula platea parturient justo Morbi id cursus tortor adipiscing. Tortor convallis pede orci Quisque id Nam condimentum sed eu Sed. Cum orci Quisque vitae egestas vitae nulla Cum fermentum egestas ante. Congue eu elit.</p>
		</div>
	      </div>

**carmalao** · 13-04-2012, 16:41

RISOLTO!

A chi servisse: nel link alla pagina del creatore del secondo script, mi sono accorto nel sorgente che ha inserito un altro script per far partire la prima tab nel onload!!!!!!!!!

Eccolo:

codice:

<script type="text/javascript" language="javascript">
						<!--//
							tabSwitch(document.getElementById('t1')); // Launch the first tab
							tabSwitch(document.getElementById('h1')); // Launch the first tab
						//-->
						</script>

Ora lo integro nel js e dovrei essere apposto.
CIAOz

**carmalao** · 13-04-2012, 16:55

NIente, non sono buono di farlo.....
Ovviamente lo script nell'html richiama direttamente il id inserito più sopra.
Ma metterlo genericamente nel js?
Ho provato ad inserire un function ma poi mi sono perso.
HELP!

Ho modificato il link alla html: http://www.scopricormons.it/schedatipo/schedatipo.html

così mi sono sbarazzato di tutte le prove e ho lasciato questa funzionante.
GRAZIE

Discussione: Probelma con TAB CSS

Strumenti discussione

Ricerca discussione

Visualizza

Probelma con TAB CSS: non riesco a mostrare contenuto prima tab al caricamento

Permessi di invio