---
title: "aktiv länk är inte aktiv?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/174137-aktiv-länk-är-inte-aktiv"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Gimbo"
published: "2008-09-17T12:34:38.000Z"
updated: "2008-09-18T12:07:52.000Z"
replies: 23
views: 766
page: 1
pages: 2
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/html-css/174137-aktiv-länk-är-inte-aktiv"
---

# aktiv länk är inte aktiv?

_Sida 1 av 2._

## #1 — Gimbo, 2008-09-17T12:34Z

Tja,

hur fungerar dte med aktiva länkar, för då jag klickar mig vidare på en länk dvs navigerar från default.htm till blabl.htm i menyn så skall ju blbla.htm vara aktiv och en bakgrund synas enligt min kod nedan, men eftersom jag går till en annan sida så läser den in koden på nytt och den blir inte aktiv, finns det ngt workaround? utan att behöva programmera i ngt serverside språk?

```
#nav-menu li a
{
padding: 0 4px;
height: 0em;
line-height: 2em;
float: left;
clear: both; 
margin: 0px 10px 5px 1.18em;
/*border: 0.1em solid #dcdce9;*/
color: #777777;
font-weight: bold;
text-decoration: none;
text-align: center;
}

#nav-menu .blabla a:active
{
background: url(img/bg_home.jpg) #fff bottom left repeat-x;
height: 45px;
line-height: 2em;
float: left;
width: 25px;
display:block;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
}
```

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

## #2 — CatZ, 2008-09-17T12:37Z

De måste vara i rätt ordning annars är det inte alla som visas korrekt.

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

## #3 — StefanBergfeldt, 2008-09-17T13:04Z

Klart det finns en WorkAround.
Du kan loopa igenom alla länkar på sidan, och kolla om href är samma som document.location.href och isåfall ändra style/class på den.

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

## #4 — Gimbo, 2008-09-17T13:25Z

skulle va tacksam om jag kunde få lite kod

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

## #5 — StefanBergfeldt, 2008-09-17T13:47Z

Här har du hur man loopar igenom alla länkar:
<http://crs.rappendal.se/post/2008/07/Oppna-lankar-i-nytt-fonster2c-och-validera-strict.aspx>

Den kan du säkert bygga om till det du är ute efter.

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

## #6 — Gimbo, 2008-09-17T14:12Z

kan inte se hur det där skulle hjälpa mig?

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

## #7 — StefanBergfeldt, 2008-09-17T14:53Z

Du använder det för att loopa igenom alla länkar på sidan. Men istället för att kontrollera om attributet rel har värdet external, så får du kolla om href är samma som document.location.href, och isåfall ändra style på länken

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

## #8 — Gimbo, 2008-09-18T07:07Z

Har testat detta nu men får det inte att fungera?

scriptet i head taggarna

```
        function externalLinks() {
            if (!document.getElementsByTagName) return;
            var anchors = document.getElementsByTagName("a");
            for (var i=0; i<anchors.length; i++) {
                var anchor = anchors[i];
                if (anchor.getAttribute("href") && anchor.getAttribute("rel") == document.location.href) {
                    anchor.onclick = function(){
                        window.open(this.href);
                        return false;
                    } 
                }
            }
        }
        window.onload = externalLinks;
```

och sedan på själva sidan:

```
<li class="oversikt"><a href="oversikt.htm" onClick="javascript:externalLinks();">ÖVERSIKT</a></li>
```

men får det inte att fungera?

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

## #9 — Danne V, 2008-09-18T07:14Z

Du missförstår inte det där med "active" då?
"active" är en s.k. selector som jag tror bara hänger kvar sen webbens begynnelse och har ingen egentlig funktion idag. Det är bara det korta ögonblick när användaren klickar på själva länken, inget annat. Har alltså inget som helst att göra med om du har själva sidan som länken leder till uppe (dvs "aktiverad") eller inte.

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

## #10 — Gimbo, 2008-09-18T07:20Z

ok, har säkert missförstått de... e inte så haj på det här, skulle va riktigt tacksam för hjälp?

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

## #11 — Danne V, 2008-09-18T07:26Z

> **Gimbo skrev:**
>
> ok, har säkert missförstått de... e inte så haj på det här, skulle va riktigt tacksam för hjälp?

OK... men det innebär ju att ingen hinner se dina finesser ändå. Ett klick tar ju liksom 1/10 sekund eller nåt (?) och man glor ju sällan på länken för att se om den ändrar färg under den där tiondels sekunden... och du har dessutom en bakgrundsbild som ska ladda osv...

Så om det inte är jag som missuppfattar helt vad du är ute efter tycker jag att du ska glömma att formatera "active" helt.

Däremot är det "a:visited" som visar länkar man redan använt (dvs öppnat de sidorna). Men om man har sida A uppe och t.ex. öppnar sida B i en ny tabb via en länk i sida A, så måste sida A laddas om för att visa stilen för "a:visited" i länken till sida B.

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

## #12 — StefanBergfeldt, 2008-09-18T07:57Z

function externalLinks() {
            if (!document.getElementsByTagName) return;
            var anchors = document.getElementsByTagName("a");
            for (var i=0; i\<anchors.length; i++) {
                var anchor = anchors*;
                if (anchor.getAttribute("href") == document.location.href) {
                    anchor.onclick = function(){
                        anchor.getAttribute("class") = "activeLinkClass";
                        return false;
                    } 
                }
            }
        }
        window.onload = externalLinks;

Det lägger du bara i ett javascript-block inom head, så fixar det sig.*

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

## #13 — Nate.A, 2008-09-18T08:31Z

Passade på att döpa om funktionen så namnet beskriver vad den gör...

```
function findActiveLink() {
    if (!document.getElementsByTagName) return;
        var anchors = document.getElementsByTagName("a"); 
	for (var i=0; i<anchors.length; i++) {
		var anchor = anchors[i]; 
		if (anchor.getAttribute("href") == document.location.href) {
			anchor.className = anchor.className + " activeLinkClass";
		}
    }
}
window.onload = findActiveLink;
```

Scriptet lägger då till "activeLinkClass" till den länk som går till sidan du redan är på och då kan du använda css för att få den att se aktiv ut. Men du måste lägga till den classen i din css.

```
#nav-menu .blabla a:active,#nav-menu .blabla a.activeLinkClass {}
```

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

## #14 — silfver, 2008-09-18T10:10Z

Försvinner inte funktionen ifall man gör ett klick någon annanstans? Känns som en meningslös grej att ha. Sköt det med php eller något i stället.

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

## #15 — StefanBergfeldt, 2008-09-18T10:28Z

Nej, den försvinner inte. Den sätter ju en css-klass på alla länkar som pekar på aktuellt dokument.

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

## #16 — Nate.A, 2008-09-18T10:39Z

> **StefanBergfeldt skrev:**
>
> Nej, den försvinner inte. Den sätter ju en css-klass på alla länkar som pekar på aktuellt dokument.

I ditt exempel använder du onClick men eftersom sidan laddas om efter man klickat så försvinner klassen igen...

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

## #17 — Gimbo, 2008-09-18T11:31Z

Nate.A  gjorde som du beskrev men det fungerar fortfarande inte? utan bakgrunden syns vid onclick och därefter när jag hoppar till nästa sida så försvinner den?

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

## #18 — StefanBergfeldt, 2008-09-18T11:31Z

i mitt första exempel, så lägger jag till ett onclick-event på länken, som triggar window.open för att öppna länken i ett nytt fönster. Sidan som öppnas har jag (eventuellt) ingen kontroll över, men scriptet körs vid onload på alla mina sidor.

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

## #19 — Gimbo, 2008-09-18T11:36Z

i mitt fall skall det inte öppnas i ett nytt fönster, utan har en meny som ser ut på följande sätt:

hem  översikt ....

och vill att en bakgrund skall följa med då man klickar på olika länkar i menyn, testade med Nate.As lösning som borde fungera rent kodmässigt men det gör det inte...

har i min css gjort följande oxå

```
#nav-menu .hem a:active, #nav-menu .hem a:active a.activeLinkClass
{
background: url(img/bg_home.jpg) #fff bottom left repeat-x;
height: 45px;
line-height: 2em;
float: left;
width: 25px;
display:block;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
}

#nav-menu .oversikt a:active, #nav-menu .oversikt a:active a.activeLinkClass
{
background: url(img/bg_overview.jpg) #fff bottom left repeat-x;
height: 45px;
line-height: 2em;
float: left;
width: 58px;
display: block;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
}
```

och i min html ser det ut så här

```
<div id="nav-menu">
<ul>
<li class="hem"><a href="default.htm">HEM</a></li>
<li class="oversikt"><a href="oversikt.htm">ÖVERSIKT</a></li>
.
.
.
```

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

## #20 — Nate.A, 2008-09-18T11:48Z

> **Gimbo skrev:**
>
> Nate.A  gjorde som du beskrev men det fungerar fortfarande inte? utan bakgrunden syns vid onclick och därefter när jag hoppar till nästa sida så försvinner den?

Har du möjlighet att posta en länk till din sida? En gissning är att du har fler javascript på sidan som orsakar konflikt med window.onload...

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/174137-aktiv-länk-är-inte-aktiv  
Nästa sida: https://www.webforum.nu/amne/html-css/174137-aktiv-länk-är-inte-aktiv/page2.md