---
title: "bakgrundsfärg i meny vid onclick"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/119806-bakgrundsfärg-i-meny-vid-onclick"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "doggelito"
published: "2005-01-11T08:48:43.000Z"
updated: "2005-01-11T11:34:01.000Z"
replies: 6
views: 297
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/119806-bakgrundsfärg-i-meny-vid-onclick"
---

# bakgrundsfärg i meny vid onclick

## #1 — doggelito, 2005-01-11T08:48Z

har problem med denna kod.
onmouseover samt onmouseout funkar som de ska samt att
när man klickar på en länk så byter td:n bakgrundsfärg, bra!

men efter man klickat på en annan länk så har fortfarande föregående länk "aktiv" bakgrundsfärg, hur löser jag det?
kan man loopa igenom alla td:s och nollställa dessa och sedan sätta den man klickat på till aktiv? eller har jag gjort nått fel?

```
<html>
<head>
<script language="JavaScript" type="text/javascript">
active=false;

function flipColor(id, type)
{
	//vid onMouseOver
	if(type=='over')
		document.getElementById("td"+id).className = 'menu_active';
	else
		//vid onMouseOut
		if(type=='out')
			document.getElementById("td"+id).className = 'menu';
		//vid onClick
		else
			document.getElementById("td"+id).className = 'menu_active';
		
}
</script>
</head>

<body>

<table cellpadding="0" cellspacing="0" width="100%">
<tr><td class="menu" id="td0" onMouseOver="flipColor(0,'over');" onMouseOut="if(this!=active){flipColor(0,'out')};" onClick="if(this!=active){flipColor(0,'click')}; active=this; parent.text.location.href='text.asp?PageId=0';" title="Startsida">Meny1</td></tr>
<tr><td class="menu" id="td1" onMouseOver="flipColor(1,'over');" onMouseOut="if(this!=active){flipColor(1,'out')};" onClick="if(this!=active){flipColor(1,'click')}; active=this; parent.text.location.href='nyheter/news_ls.asp?PageId=1';" title="Nyheter">Meny2</td></tr>
</table>

</body>
</html>
```

jag har kikat och använt lite kod från denna:
<http://www.webforum.nu/showthread.php?s=&forumid=24&threadid=45591&highlight=bakgrundsf%E4rg+meny>

Permalänk: https://www.webforum.nu/p/119806

## #2 — doggelito, 2005-01-11T09:20Z

så här kan man ju alltid göra:

```
<script language="JavaScript" type="text/javascript">
active=false;

function flipColor(id, type)
{
	//vid onMouseOver
	if(type=='over')
		document.getElementById("td"+id).className = 'menu_active';
	else
	
		//vid onMouseOut
		if(type=='out')
			document.getElementById("td"+id).className = 'menu';
			
		//vid onClick
		else
		{
			td = document.getElementsByTagName("td");
			for(i = 0; i < td.length; i++)
			{
				td[i].className = 'menu';
			}
			
			document.getElementById("td"+id).className = 'menu_active';
		}
}

</script>
```

men då får man inte ha andra tabeller på samma sida för då får dessa också css-klassen 'menu'!
finns det nått annat sätt att lösa detta på? :(

Permalänk: https://www.webforum.nu/p/1525114

## #3 — dectgap, 2005-01-11T10:38Z

Det finns ingen anledning för dig att inte använda länkar.

```
<html>
<head>
<style type="text/css">
#menu a:link, #menu a:visited { ... } /* "Normalt" läge */
#menu a:hover { ... }  /* Onmouseover */
#menu a:active { ... } /* Vid klick */
</style>
</head>

<body>

<table cellpadding="0" cellspacing="0" width="100%" id="menu">
<tr><td id="td0"><a href="text.asp?PageId=0" target="text" title="Startsida">Meny1</a></td></tr>
<tr><td id="td1"><a href="nyheter/news_ls.asp?PageId=1" target="text" title="Nyheter">Meny2</a></td></tr>
</table>

</body>
</html>
```

Pseudoklassen *active* tolkas visserligen lite olika i IE och Mozilla, men att få det att fungera som i IE är inte speciellt svårt med lite JavaScript - om det i övrigt är en lösning som du känner dig nöjd med.

Permalänk: https://www.webforum.nu/p/1525162

## #4 — doggelito, 2005-01-11T10:46Z

njae, vill nog inte ha det så.
som besökare så tycker i alla fall jag att hela kolumnen ska vara länkad när man använder en onMouseOver-effekt där bakgrundsfärgen ändras.
det blir förvirrande annars:
 man hovrar, bakgrunden ändras, åhh va fint tänker man och klickar... inget händer...

Permalänk: https://www.webforum.nu/p/1525167

## #5 — doggelito, 2005-01-11T10:49Z

hmm, om man inte kan göra a-taggen 100% bred då förståss så den täcker hela kolumnbredden, hmm, går det tro?

Permalänk: https://www.webforum.nu/p/1525168

## #6 — dectgap, 2005-01-11T10:55Z

> **doggelito skrev:**
>
> hmm, om man inte kan göra a-taggen 100% bred då förståss så den täcker hela kolumnbredden, hmm, går det tro?

Självklart:

```
#menu a { display: block; width: 100% }
```

Egentligen ska man inte behöva skriva *width: 100%*, men för att IE 5 ska göra rätt är du tvungen att skriva så.

Permalänk: https://www.webforum.nu/p/1525172

## #7 — doggelito, 2005-01-11T11:34Z

nämen! va fiffigt! tack dectgap! :bire
skönt att slippa java-script också!  ;)

Permalänk: https://www.webforum.nu/p/1525198

---

Tråden på webben: https://www.webforum.nu/amne/javascript/119806-bakgrundsfärg-i-meny-vid-onclick
