webForumDet fria alternativet
Logga in / Bli medlem

Ändra span background...

JavaScript

1 svar · 337 visningar · startad av Donatello

Medlem sedan jan. 2005108 inlägg
Frågan#1

Hej.

Undrar om någon kan hjälpa mig en en kodsnutt, då javascript inte är min starka sida. Jag använder följande kod:

<script type="text/javascript">

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

</script>

<div id="masterdiv" style="position: absolute; top: 93px; left: 5px; width: 774px; background-color: #9197D2; 
height: 30px; font-family: Verdana; font-size: 10px; color: #000000;">
	<span id="M_Link1_text"><a href="#" onclick="SwitchMenu('M_Link1')">Länk 1</a></span> - 
	<span id="M_Link2_text"><a href="#" onclick="SwitchMenu('M_Link2')">Länk 2</a></span> - 
	<span id="M_Link3_text"><a href="#" onclick="SwitchMenu('M_Link3')">Länk 3</a></span><br />
	
	<span class="submenu" id="M_Link1">
		<a href="/1.aspx">Presentation</a>
		- <a href="/2.aspx">Blogg</a>
		- <a href="/3.aspx">Gästbok</a>
		- <a href="/4.aspx">Kontakt</a>
	</span>
	
	<span class="submenu" id="M_Link2">
		<a href="/5.aspx">Presentation</a>
		- <a href="/6.aspx">Blogg</a>
		- <a href="/7.aspx">Gästbok</a>
		- <a href="/8.aspx">Kontakt</a>
	</span>

	<span class="submenu" id="M_Link3">
		<a href="/9.aspx">Cissi</a>
		- <a href="/10.aspx">Maggan</a>
		- <a href="/11.aspx">Mimmi</a>
		- <a href="/12.aspx">Sapphira</a>
		- <a href="/13.aspx">Selma</a>
	</span>
</div>

Koden ger mig en övre menyrad som, om man klickar på en av länkarna, expanderar sig till även en undre menyrad med länkar till faktiska sidor. Vad jag saknar är en funktion som gör att länken man trycker på i övre menyraden får en annan span background-color, så man ser vilken av menyerna man är inne i.

Någon som skulle vilja vara behjälplig med det? Jag fattar ingenting som inte är skrivet i vb. :r

Go' jul! :bire
/Donatello

Medlem sedan dec. 20025 483 inlägg
#2

God Jul! :)

<script type="text/javascript">

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
			document.getElementById(obj + "_text").style.backgroundColor = "#eee";
			var i = 1, elm;
			while (elm = document.getElementById("M_Link" + i + "_text")){
				if (i != /\d+/.exec(obj)[0]){
					elm.style.backgroundColor = "#9197d2";
				}
				++i;
			}
		}else{
			el.style.display = "none";
			document.getElementById(obj + "_text").style.backgroundColor = "#9197D2";
		}
	}
}

</script>

<div id="masterdiv" style="position: absolute; top: 93px; left: 5px; width: 774px; background-color: #9197D2; 
height: 30px; font-family: Verdana; font-size: 10px; color: #000000;">
	<span id="M_Link1_text"><a href="#" onclick="SwitchMenu('M_Link1')">Länk 1</a></span> - 
	<span id="M_Link2_text"><a href="#" onclick="SwitchMenu('M_Link2')">Länk 2</a></span> - 
	<span id="M_Link3_text"><a href="#" onclick="SwitchMenu('M_Link3')">Länk 3</a></span><br />
	
	<span class="submenu" id="M_Link1">
		<a href="/1.aspx">Presentation</a>
		- <a href="/2.aspx">Blogg</a>
		- <a href="/3.aspx">Gästbok</a>
		- <a href="/4.aspx">Kontakt</a>
	</span>
	
	<span class="submenu" id="M_Link2">
		<a href="/5.aspx">Presentation</a>
		- <a href="/6.aspx">Blogg</a>
		- <a href="/7.aspx">Gästbok</a>
		- <a href="/8.aspx">Kontakt</a>
	</span>

	<span class="submenu" id="M_Link3">
		<a href="/9.aspx">Cissi</a>
		- <a href="/10.aspx">Maggan</a>
		- <a href="/11.aspx">Mimmi</a>
		- <a href="/12.aspx">Sapphira</a>
		- <a href="/13.aspx">Selma</a>
	</span>
</div>
259 ms totalt · 4 externa anrop · v20260731065814-full.14655e19
124 ms — deklarationer (db)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)
125 ms — ändringar (db)