12 svar · 696 visningar · startad av miramira
Hej!
Har ett litet problem med min meny. Jag vill ha en bild på den länk som är aktiv.
Lyckas lägga in bilden på t ex visited och hover men inte på active. Jag vill alltså att den länk som man besöker sticker ut så att man vet var man befinner sig.
Väldigt tacksam för svar
a:active syftar på den länk som har fokus, och har inget att göra med vilken sida som är laddad för tillfället.
<script type="text/javascript">
window.onload=function(){
var links=document.getElementByTagName("A");
for (var i=0; i<links.length; i++){
if (links[i].href==location.href)
for (var j=0; j<links[i].childNodes; j++){
if (links[i].childNodes[j].tagName == "IMG" && -1 &= links[i].childNodes[j].src.indexOf("normal.gif"))
links[i].childNodes[j].src = "aktiv.gif";
}
}
}
</script>
Typ så. Koden är bara testad i mitt huvud, men utgör en mall för kod som gör det du vill.
Hej och välkommen till WF! :)
Tror att jag förstår vad du vill åstadkomma... Men vill du verkligen använda active?
"active" funkar bara när länken är "aktiv" dvs efter "hover" och innan den blivit "visited".
Det jag tror att du vill åt brukar man åstadkomma med en class eller ett id på den länken som är aktuell - på just den sidan...
Men jag kan ju ha missuppfatat!
Presentera lite kod ( HTML och CSS ) så kan du säkert få hjälp!
Ok, men det jag är ute efter är att den länk som jag besöker för tillfället ska sticka ut ifrån dem andra länkarna. Jag kan ju styra utseendet på länkarna med t ex. a:hover eller a:visited men varför kan jag inte få a:active att (i mitt fall) visa en bakgrundsbild?
Vad vill du åt? Att bilden ska visas när man tabbar på sidan?
Eller vill du att den aktuella sidans länk ska ha ett visst utseende?
På en vanlig sida (utan ramar och sånt) är en länk bara "active" efter man tryckt på den (typ 1 sekund) - sedan laddas ju en ny sida in och då har den länken inte fokus längre.
a:active påverkar en länk som är markerad. Från det att musknappen trycks ner till länken förlorar fokus (eller sidan laddas om) i FF's tolkning och så länge länken har fokus i IE's tolkning. Pröva att trycka ner musknappen på en länk med a:active och dra bort pekaren.
<style type="text/css">
a:link{color: blue;}
a:active{color:green;}
</style>
<a href="foo">bar</a>
Hej,
länkarna på sidan vet inte själva om de länkar till den aktuella sidan - så de kan inte veta om de ska vara markerade på något speciellt sätt. Men detta går alltså att lösa med t.ex. en css-class, som Nipon nämnde. Man måste då också sätta attributet class på a-taggen som ska visas på ett speciellt sätt.
Till exempel:
<html>
<head>
<style type="text/css">
a.aktuell-sida {font-weight:bold; background-image: url(bilden.gif);}
</style>
</head>
<body>
<a href="sida1.html">länk 1</a><br />
<a class="aktuell-sida" href="sida2.html">länk 2</a><br />
<a href="sida3.html">länk 3</a><br />
<a href="sida4.html">länk 4</a><br />
</body>
</html>
/David
Ok, nu fattar jag!
De jag vill är att när jag besöker en av mina sidor ska länken för just den sidan vara annorlunda än dem andra länkarna. Man ska alltså kunna urskilja den från dem andra länkarna! Använder man bara a:visited vet man ju inte var man befinner sig om man redan klickat på alla länkarna.
Red ut detta för mig så jag kan gå vidare =)
Förslag:
[B]HTML:[/B] (på sida 1):
<ul>
<li><a href="#" id="aktuell" title="Denna sida">Sida 1</a></li>
<li><a href="#" title="Sida 2">Sida 2</a></li>
<li><a href="#" title="Sida 3">Sida 3</a></li>
<li><a href="#" title="Sida 4">Sida 4</a></li>
<li><a href="#" title="Sida 5">Sida 5</a></li>
</ul>
[B]CSS:[/B]
a#aktuell {här stajlar du hur du vill att den aktuella länken ska se ut}
På de andra sidorna måste du ju flytta på id="aktuell" i HTML-koden - förstås... :)
RED:
Ja - eller som treshold föreslog! Förlåt såg inte det... :r
Tack för alla svar ! Tror att jag ska kunna fixa de här nu...
eller såhär
<body id="startsida">
<div id="huvudmeny">
<ul>
<li class="hem"><a href="/">start</a></li>
<li class="om"><a href="/">info</a></li>
<li class="blog"><a href="/">blogg</a></li>
<li class="kont"><a href="/">kontakt</a></li>
</ul>
</div>
body#startsida #huvudmeny li.hem a,
body#information #huvudmeny li.om a,
body#blogg #huvudmeny li.blog a,
body#kontakt #huvudmeny li.kont a
{ color:#000; }
så slipper man ha olika menyer på varje sida...
caya skrev:
body#startsida #huvudmeny li.hem a, body#information #huvudmeny li.om a, body#blogg #huvudmeny li.blog a, body#kontakt #huvudmeny li.kont a { color:#000; }
Det verkar vara lite onödigt specifika selektorer. Följande borde räcka:
#startsida .hem a,
#information .om a,
#blogg .blog a,
#kontakt .kont a
{ color:#000; }
caya skrev:
eller såhär
<body id="startsida">så slipper man ha olika menyer på varje sida...
Visst caya - det där är ju hur fiffigt som helst - men inte så användarvänligt. :)
Eftersom man åtminstone bör indikera med "title" att man befinner sig på "denna sida" så kan man ju lika gärna flytta på "id=aktuell" också... :)
Helst ska inte listpunkten på "denna sida" innehålla någon länk överhuvud taget - så att den "länken" inte indikeras som länk.
Så här typ:
<ul id="meny">
<li><span id="aktuell" title="Denna sida">Sida 1</span></li>
<li><a href="#" title="Sida 2">Sida 2</a></li>
<li><a href="#" title="Sida 3">Sida 3</a></li>
<li><a href="#" title="Sida 4">Sida 4</a></li>
<li><a href="#" title="Sida 5">Sida 5</a></li>
</ul>
Och sen:
#meny a, #meny span { stajla länkarna }
#meny span#aktuell { stajla aktuell länk }