Aiuto per modificare script menu linguette

**stiffa** · 24-01-2006, 17:27

ciao. Ho smanettato molto su questo script trovato in rete(posto solo la base) ma ancora non riesco a fare un importante modifica.
Ho un menu a linguette gestito con i div. Il mio problema e' che a ogni refresh viene sempre presentata come prima, la linguetta TAB1 con il suo relativo contenuto. Io vorrei che se mi trovassi a fare refresh dalla TAB4 , il menu si ricariche con selezionata la linguetta4 (messa in neretto) e sotto il contenuto della Tab4

come posso fare?
Credo che voi esperti di JS lo sappiate fare al volo.
Fate copia incolla dello script cosi potete testarlo...grazie mille

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Terminal Gold</title>
<STYLE>
.conts {
	VISIBILITY: hidden
}
.tab {
	BORDER-LEFT: #e0e0e0 thin solid; BORDER-RIGHT: gray thin solid; BORDER-TOP: #e0e0e0 thin solid; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; FONT-WEIGHT: normal; TEXT-ALIGN: center
}
.selTab {
	BORDER-LEFT: #000080 thin solid; BORDER-RIGHT: #000080 thin solid; BORDER-TOP: #000080 thin solid; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; FONT-WEIGHT: bold; TEXT-ALIGN: center
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script language = "javascript" type="text/javascript">
window.onload=function()
{
	init();
}

//sets the default display to tab tab
function init(){ 
	document.getElementById("tabContents").innerHTML = document.getElementById("t1Contents").innerHTML; 
}


//a public function that the container uses to pass in values for the card containers 
function public_Contents(contents1, contents2, contents3, contents4){ 
document.getElementById("t1Contents").innerHTML = contents1; 
document.getElementById("t2Contents").innerHTML = contents2; 
document.getElementById("t3Contents").innerHTML = contents3; 
document.getElementById("t4Contents").innerHTML = contents4;
document.getElementById("t5Contents").innerHTML = contents5;
init(); 
} 

//this is the tab switching function 
var currentTab; 
var tabBase; 
var firstFlag = true; 

function changeTabs(tabID){ 
	if(firstFlag == true){ 
	currentTab = document.getElementById("t1"); 
	tabBase = document.getElementById("t1base"); 
	firstFlag = false; 
	} 
	if(document.getElementById(tabID).className == "tab"){ 
	currentTab.className = "tab"; 
	tabBase.style.backgroundColor = "white"; 
	currentTab = document.getElementById(tabID); 
	tabBaseID = currentTab.id + "base"; 
	tabContentID = currentTab.id + "Contents"; 
	tabBase = document.getElementById(tabBaseID); 
	tabContent = document.getElementById(tabContentID); 
	currentTab.className = "selTab"; 
	tabBase.style.backgroundColor = ""; 
	document.getElementById("tabContents").innerHTML = tabContent.innerHTML; 
	} 
} 
</SCRIPT>
</head>
<body leftmargin="0" topmargin="0"  marginheight="0" marginwidth="0" scrolling = "no">

	<table class="tabbedDialog"  align = "left" valign="top" cellpadding="0" cellspacing="0"> 
		<tr>
			<td valign ="top" height="30" cellspacing="2" >
				<table width="100%" align="left"  >
					<tr> 
						<td class="selTab" onclick="changeTabs('t1')"  height="25" id="t1" >Tab1</td> 
						<td class="tab" onclick="changeTabs('t2')"   id="t2">tab2</td> 
						<td class="tab" onclick="changeTabs('t3')"   id="t3">tab3</td> 
						<td class="tab" onclick="changeTabs('t4')"  id="t4">tab4</td>
						<td class="tab" onclick="changeTabs('t5')"  id="t5">tab5</td> 
					</tr> 
					<tr> 
						<td id="t1base" style="BORDER-LEFT: gray thin solid; HEIGHT:1px; "  ></td> 
						<td id="t2base" style="BACKGROUND-COLOR: white; HEIGHT: 1px;"></td> 
						<td id="t3base" style="BACKGROUND-COLOR: white; HEIGHT: 1px; "></td> 
						<td id="t4base" style="BACKGROUND-COLOR: white; HEIGHT: 1px; "></td> 
						<td id="t5base" style="BACKGROUND-COLOR: white; HEIGHT: 1px; "></td> 	 
					</tr> 
				</table>
			</td>
		</tr>	
		<tr> 
			<td height="100%"colspan="7" id="tabContents" > </td> 
		</tr> 
		<tr >
			<td>
				<div class="conts" id="t1Contents" > 
				
				Sono nella Tab1
				</div> 
				<div class="conts" id="t2Contents" > 
				Sono nella Tab2
				</div> 
				<div class="conts" id="t3Contents" >
					Sono nella Tab 3
				</div> 
				<div class="conts" id="t4Contents" >
					Sono nella Tab 4
				</div> 
				
				<div class="conts" id="t5Contents" >
				Sono nella Tab 5
				</div> 		
			</td>
		</tr>
	</table>			

</body>
</html>

aiutoooo pls....

**fcaldera** · 24-01-2006, 17:35

un idea in fase embrionale ce l'avrei ma è tutta da verificare

per esempio potresti associare alle vari linguette dei link a delle ancore.

Ad ogni refresh controlli il contenuto della barra degli indirizzi chiamando una funzione javascript

la funzione farà il parsing dell'url verificando se esiste un riferimento ad un ancora (ad es. http://www.dominio.it/pagina.html#linguetta3)

di conseguenza rendi visibile il terzo tab nascondendo gli altri

**stiffa** · 24-01-2006, 17:36

smanettando ho visto questo

dopo l'inizio della tabbed...quando ho :
<td class="selTab" onclick="changeTabs('t1')" height="25" id="t1" >Tab1</td>
<td class="tab" onclick="changeTabs('t2')" id="t2">tab2</td>
<td class="tab" onclick="changeTabs('t3')" id="t3">tab3</td>
<td class="tab" onclick="changeTabs('t4')" id="t4">tab4</td>
<td class="tab" onclick="changeTabs('t5')" id="t5">tab5</td>

se class="selTab" lo mettiamo al t4 sara quello la linguetta selezionata...il fatto e' che mi rimane selezionata anche quando seleziono le alre...

**stiffa** · 24-01-2006, 17:40

fcaldera sei sempre gentilissimo a rispondere a tutti...
stavolta pero' non ho capito gran che di quello che proponi...
inoltre il tuo link non va...

Cmq...in teoria e' tutto gia pronto nel javascript...e' tutto settabile, sia la linguetta di partenza che il contenuto...
Ho trovato entrambi dove vengono settati....ma come ho scritto poco fa....mi rimane sempre selezionato quello con selTab(se lo sposto dal primo in cui e' ora) e se clikko gli altri ne ottengo cosi 2 selezionati....

**fcaldera** · 24-01-2006, 17:51

sfido che il link non vada... era un esempio...

cerco di spiegarmi meglio: se le linguette dei tab fossero dei link (nel tuo caso sono celle di una tabella) allora potresti fare in modo di caricare un ancora nell'attributo href

se stai provando una pagina del tipo menutab.html, al click la barra dell'url diventerà menutab.html#nome_di_un_ancora

quando fai il refresh le ancore vengono di norma mantenute nella barra degli indirizzi.

Ciò significa che tu nell'header della pagina puoi scrivere una funzione che legge l'url (in particolare il nome dell'ancora) e mostrare di conseguneza un particolare tab

Come ti dicevo prima però è un ipotesi da verificare ancheperchè devi riadattare (un pò) la soluzione che hai postato

**stiffa** · 24-01-2006, 18:01

...mmm....in effetti la tua idea non fa una piega (testa a parte).
Pero' io non posso mettere link. Deve essere caricato tutto subito....Se cabio linguetta mostra un div....ora...ho trovato tutte le cose da cambiare per settare al refresh per esempio la tab4 come partenza (sia linguetta che contenuto)....ma mi serve qualcuno che mi dica come implementare il tutto in maniera dinamica...

Ho necessita' che qualcuno abbia la briga di tentare , copiando il codice che ho postato...

io da solo non ce la faccio...

Discussione: Aiuto per modificare script menu linguette

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto per modificare script menu linguette

Permessi di invio