Oon tässä mietiskellyt eräälle sivulle valikkoa tehdessäni, että mitenköhän saadaan aikaseksi sellainen sydeemi, että kun valikossa on kyseinen sivu valittuna näkyy kyseisen linkin tyyli erilaisena kuin muiden valikon linkkien tyyli.
Miten siis saadaan moinen aikaiseksi?
Jos tulostat sivun php:llä käyttäen esimerkiksi index.php?sivu=plaa tyylistä ratkaisua, tutkit vain linkkejä tulostettaessa, millä sivulla ollaan, ja tulostat eri tyylisen linkin, esim normaaleilla linkeillä <a href... class="normaaliLinkki">... ja valitulla linkillä <a href... class="valittuLinkki"> tms.
Öö..
CSS
a
{
linkin tyylit
}
a:active
{
aktiivisen linkin tyylit
}
a:visited
{
vieraillun linkin tyyli
}
a:hover
{
kohdistimen alla olevan linkin tyyli
}EDIT: Hups.. Haitkin toisenlaista ratkaisua.. PHP:lla saa toimimaan.
if($_GET['sivu'] == "etusivu") { echo '<a class="activelink" href="?sivu=etusivu">Etusivu</a>'; } else { echo '<a href="?sivu=etusivu">Etusivu</a>'; }
..ja sitten vain tyylittelyt kohdilleen niin pitäisi toimia.
Meillä on myös tarjolla köyhän miehen JavaScript-ratkaisu! Syytä tämän ratkaisun käyttöön voidaan puida näin: miksi sivun rakenteessa pitäisi olla tieto siitä, mikä linkki tämänhetkinen sivu on? Kyseessä kun kuitenkin on puhtaasti tyylillinen seikka. Valitettavasti CSS ei tällä hetkellä mahdollista minkäänlaisia constant-arvoja, esim. tällainen olisi mahdollista jos CSS:stä sellaisia löytyisi:
// tämä siis valitsisi kyseisen sivun osoitteen
// näin haluaisin itse asiassa tämän tehdä joskus tulevaisuudessa
a[href=thisurl] { font-weight : bold; }
// tämä taas on mahdollista nykyisellä CSS:llä (IE ei tue)
a[href="http://merri.net/"] { background-image : url('merrinet.png'); }Joudumme siis tyytymään JavaScriptiin, joka hoitaa tämän valitsemisen puolestamme. Kirjoitin tässä tätä työtä varten pienen skriptin, joka hoitaa homman kotiin.
var osoite = document.location.href;
var polku = new Array();
polku = osoite.split('/');
function koko_linkki(linkki) {
var lopputulos = '';
var linkkipolku = new Array();
linkkipolku = linkki.split('/');
if (linkkipolku.length > 1) {
if (linkkipolku[0] != '') {
i = linkkipolku.length - 1;
j = polku.length - 2;
lopputulos = linkkipolku[i];
while (i > 0 && j > 2) {
i--;
switch (linkkipolku[i]) {
case '..':
j--;
break;
case '.':
case '':
break;
default:
lopputulos = linkkipolku[i] + '/' + lopputulos;
}
}
while (j > 1) {
lopputulos = polku[j] + '/' + lopputulos;
j--;
}
} else {
lopputulos = polku[2] + linkkipolku[linkkipolku.length - 1];
}
} else {
j = polku.length - 2;
lopputulos = linkki;
while (j > 1) {
lopputulos = polku[j] + '/' + lopputulos;
j--;
}
}
return polku[0] + '//' + lopputulos;
}
function aktivoi_linkki(valikon_nimi) {
linkit = document.getElementById(valikon_nimi).getElementsByTagName('a');
for (var i = 0; i < linkit.length; i++) {
if (koko_linkki(linkit[i].getAttribute('href')) == osoite) {
linkit[i].setAttribute('id', 'valittu');
}
}
}Tuon voi tallentaa vaikka omaan tiedostoonsa, vaikka nimelle linkit.js
Sitten liitetään HTML-tiedostoon:
...
<style type="text/css">
#valittu { font-weight : bold; }
</style>
<script src="linkit.js" type="text/javascript"></script>
</head>
<body onload="aktivoi_linkki('valikko')">
<!-- esimerkkivalikko -->
<ul id="valikko">
<li><a href="/">Moikka</a></li>
<li><a href="./index.html">Moikka vaan</a></li>
<li><a href="../index.html">Moikkelis</a></li>
<li><a href="index.html">Jep jep</a></li>
</ul>Parastahan tässä ratkaisussa on se, että tämä toimii jo minkä tahansa olemassa olevan koodin kanssa ihan suoraan :) Tämä toimii jopa palvelimilla joilla ei ole käytettävissä PHP:ta tai muuta kivaa palvelinpuolen kieltä.
Kiitos kovasti vastaajille vaivannäöstä. näillähän mä pärjäänkin jo :)
Aihe on jo aika vanha, joten et voi enää vastata siihen.