webForumDet fria alternativet

Ändra span background...

1 svar · 337 visningar · startad av Donatello

DonatelloMedlem sedan jan. 2005108 inlägg
#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

Peter SMedlem sedan dec. 20025 484 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>
Genererad på 389 ms · cache AV · v20260730165559-full.f96bc7eb