[javascript/CSS] OnClick een link underlinen - Softwareontwikkeling

vrijdag 27 februari 2004 14:16

Acties:

Topicstarter

Ik wil wanneer er op een a href geklikt wordt zorgen dat die link continu underlined wordt. Dit om te zorgen dat de gebruiker kan zien bij welke menuoptie hij is.. ik had al
<a href='bla.php' OnClick = 'this.style.text-decoration: 'underline''>bla</a>
geprobeerd maar dat werkt niet. Is het uberhaubt wel mogelijk?

vrijdag 27 februari 2004 14:19

Acties:

X-Lars

Just GoT it.

inhoudelijk kan ik het je zo snel niet zeggen, maar check wel even je quotes (" en ')

vrijdag 27 februari 2004 14:21

Acties:

Verwijderd

HTML:

1	<a href="bla.php" onclick="this.style.textDecoration='underline';">bla</a>

zou toch moeten werken?

vrijdag 27 februari 2004 14:22

Acties:

X-Lars

Just GoT it.

In CSS is het text-decoration.

vrijdag 27 februari 2004 14:22

Acties:

BtM909

Watch out Guys...

X-Lars schreef op 27 februari 2004 @ 14:22:
In CSS is het text-decoration.

In JS is het textDecoration

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 27 februari 2004 14:24

Acties:

Verwijderd

Je zou het volgens mij ook zonder js moeten kunnen doen

Cascading Stylesheet:

<style type="text/css">
    a {
        text-decoration     : none;
    }
    
    a:active, a:focus {
        text-decoration     : underline;
    }
</style>

/edit Hoewel, dat werkt misschien alleen bij anchors binnen dezelfde pagina...

[ Voor 23% gewijzigd door Verwijderd op 27-02-2004 14:25 ]

vrijdag 27 februari 2004 14:24

Acties:

X-Lars

Just GoT it.

BtM909 schreef op 27 februari 2004 @ 14:22:
[...] In JS is het textDecoration

a) het klopt wel wat ik zeg, maar
b) het was om het verschil aan te geven

[ Voor 12% gewijzigd door X-Lars op 27-02-2004 14:28 ]

vrijdag 27 februari 2004 14:24

Acties:

pasta

Ondertitel

.

[ Voor 100% gewijzigd door pasta op 27-02-2004 14:26 . Reden: hier stond onzin ]

Signature

vrijdag 27 februari 2004 14:26

Acties:

chriz

Topicstarter

Kijk nou, dat werkt, allemaal door die -
Maar als ik nu op een andere link klik.
Is er dan een mogelijkheid om te zorgen dat de underline bij link1 weggaat?

vrijdag 27 februari 2004 15:07

Acties:

Verwijderd

volgens mij is een functie maken dan het handigst:

1) al je links voorzien van een id en die id's in een array zetten.
2) onClick een functie aanroepen waarbij je het id meegeeft (hoewel je dat ook uit het event zou kunnen halen)
3) array doorlopen en overal textDecoration op 'none' zetten behalve bij het actieve id.

zoals altijd zijn er meerdere manieren om hetzelfde te bereiken maar dit 'should do'...

vrijdag 27 februari 2004 15:21

Acties:

Verwijderd

'k heb een beetje gepielt, en denk dat dit het beste zou moeten werken.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <style type="text/css">
        a{text-decoration:none;display:block;}
    </style>
    <script type="text/javascript">
    window.onload = function() {    //Zodra het document geladen wordt
        var menu = document.getElementsByTagName('a'); //Dit haalt dus alle links op

        for(var i=0;i<menu.length;i++){ //Loopt ze allemaal door
            // Het neemt hier alle anchor-elementen
            // Natuurlijk zou je een check kunnen doen op (css) classname
            menu[i].onclick=new Function("sel(this)");  //stelt de onClick functie voor je in
        }
        cursel= menu[0];    
        //stelt een element op cursel in, anders krijg je bij show een error 
        //of moet je een puntloze check steeds doen
    }
    function sel(obj){
        cursel.style.textDecoration='none'; //Haalt de underline bij de vorrige weg
        cursel=obj;             //Stelt de nieuwe als geselecteerd in
        obj.style.textDecoration='underline';   //Zet de underline op de nieuwe neer
    }
    </script>
</head>
<body>
    <a href="#">bla</a>
    <a href="#">a</a>
    <a href="#">ya</a>
    <a href="#">waa</a>
</body>
</html>

[ Voor 19% gewijzigd door Verwijderd op 27-02-2004 15:27 . Reden: lay-out vermolestering weghalen ;) ]