webForumDet fria alternativet

aktiv länk är inte aktiv?

HTML & CSS

23 svar · 752 visningar · startad av Gimbo

Medlem sedan dec. 20001 626 inlägg
Frågan#1

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;
}
Medlem sedan jan. 20022 440 inlägg
#2

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

Medlem sedan sep. 2004828 inlägg
#3

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.

Medlem sedan dec. 20001 626 inlägg
#4

skulle va tacksam om jag kunde få lite kod

Medlem sedan sep. 2004828 inlägg
#5

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.

Medlem sedan dec. 20001 626 inlägg
#6

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

Medlem sedan sep. 2004828 inlägg
#7

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

Medlem sedan dec. 20001 626 inlägg
#8

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?

Medlem sedan aug. 20068 090 inlägg
#9

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.

Medlem sedan dec. 20001 626 inlägg
#10

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

Medlem sedan aug. 20068 090 inlägg
#11

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.

Medlem sedan sep. 2004828 inlägg
#12

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.*

Medlem sedan mars 2006296 inlägg
#13

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 {}
Medlem sedan apr. 200312 679 inlägg
#14

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.

Medlem sedan sep. 2004828 inlägg
#15

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

Medlem sedan mars 2006296 inlägg
#16

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...

Medlem sedan dec. 20001 626 inlägg
#17

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?

Medlem sedan sep. 2004828 inlägg
#18

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.

Medlem sedan dec. 20001 626 inlägg
#19

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>
.
.
.
Medlem sedan mars 2006296 inlägg
#20

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...

553 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
408 ms — deklarationer (db)
0 ms — hämta statistik (cache)
142 ms — hämta tråd, inlägg och bilagor (db)
408 ms — ändringar (db)