Flikmeny, byta class?

Tjosan sa!

Har hittat ett script som fungerar till det ändamål som jag vill, men skulle vilja modifiera det lite. Scriptet fungerar så att den visar det lager som man väljer att visa med t.ex onClick på en <a>-tagg. Alltså onClick="showLayer('foo')". Då visar den det lagret och jag döljer alla andra lager genom att använda hideLayer('foo2').

function showLayer(Id){
	if (document.all) {
		document.getElementById(Id).className='active';
		document.all[Id].style.visibility = "visible";
	} else if (document.layers){
		document.layers[Id].visibility = "show";
		document.getElementById(Id).className='active';
	} else if (document.getElementById){
		document.getElementById(Id).style.visibility = "visible";
		document.getElementById(Id).className='active';
	}
}
function hideLayer(Id){
	if (document.all) {
		document.all[Id].style.visibility = "hidden";
		document.getElementById(Id).className='';
	} else if (document.layers){
		document.layers[Id].visibility = "hide";
		document.getElementById(Id).className='';
	} else if (document.getElementById){
		document.getElementById(Id).style.visibility = "hidden";
		document.getElementById(Id).className='';
	}
}

Så långt fungerar det som det ska, men nu så vill jag att den <li> som länken ligger i ska ändra klass så att den är aktiv eller vad man ska säga.

	<ul>
		<li><a href="#" onclick="showLayer('1'); 
    						hideLayer('2'); 
    						hideLayer('3');
    						hideLayer('4');
    					        hideLayer('5');">Hem</a></li>			

		<li><a href="#" onclick="hideLayer('1'); 
    						showLayer('2'); 
    						hideLayer('3');
    						hideLayer('4');
    					        hideLayer('5');">Artiklar</a></li>		
        </ul>

Om du ger varje <li> ett id så kan du skapa en funktion som du låter byta class på det id du skickar in.

function setActiveTab(liID) {

var currLiElem = document.getElementById(liID);

currLiElem .setAttribute("class", "some_class_name");
currLiElem .setAttribute("className", "some_class_name");

return;
}

och så lägger du in setActiveTab('hem'); efter showlayer etc...

Fungerar skitbra! Men nu i efterhand har jag kommit underfund med att det blir rätt många show/hide om man har många flikar. Går det inte på något sett att göra så att man bara nollställer alla flikar eller vad man ska säga, sedan gör man den tab som man klickat på aktiv. Med endast en setActiveTab('foo');

Jo det går såklart.

Du kan göra din kod smartare, där den första tanken är såhär: kommer du någonsin ha flera menyer öppna samtidigt? Svar nej. Alltså är det overkill att gömma alla, även dom som redan är gömda. Så det du kan göra är att utgå från när man kommer till sidan så är alla menyer stängda.

Skapa en variabel i en ny js-funktion opencloseTab(tabname) som kommer ihåg aktuell tab. Kalla variabeln tex för curTab och sätt den till 'nothing'. Och så kör du tex onklick opencloseTab('hem'). Eftersom curTab = 'nothing' så behöver du inte gömma någon tab. Och så kan du köra showLayer('hem') och efter det sätter du curTab = 'hem'.

När du nästa klick klickar på en annan meny, tex 'Artiklar' så körs onklick med opencloseTab('Artiklar'), och eftersom curTab nu är 'hem' så stänger du hem och öppnar 'Artiklar'. Och funktionen sätter såklart curTab till 'Artiklar'

Du borde kunna använda dina showLayer och hideLayer inuti den nya funktionen

Jag har använt samma "tänk" på en testsida jag gjort https://www.egenart.org/test/nr1 , men jag använder mig av http://script.aculo.us/ js-bibliotek. Fast det är ingen magi om man kan lite programmering :)