loop igennem a tags og ændre classname
Hej.Jeg har følgende kode:
<style type="text/css">
.box{
width:150px;
height:50px;
background:#F0F;
}
.box1{
width:150px;
height:50px;
background:#F00;
}
.box2{
width:150px;
height:50px;
background:#000;
}
.box3{
width:150px;
height:50px;
background:#00C;
}
</style>
</head>
<body>
<div id="changeme1" class="box1"></div>
<div id="changeme2" class="box2"></div>
<div id="changeme3" class="box3"></div>
<br /><br /><br />
<a href="java script:void(0)" onclick="document.getElementById('changeme1').className = 'box'">change color</a>
<a href="java script:void(0)" onclick="document.getElementById('changeme2').className = 'box'">change color</a>
<a href="java script:void(0)" onclick="document.getElementById('changeme3').className = 'box'">change color</a>
Når jeg klikker på de links der er, ændres classname på den pågældende id og boksen ændre farve. klikker jeg på alle links ændres alle classnames, og alle bokse ændre dermed farve. Det jeg gerne vil opnå er at når jeg klikker på et link, defaults alle de andre bokse tilbage til deres oprindelige classname.
Altså, kun en boks af gangen må have den farve defineret i css class .box. Har en boks allerede classname .box og man klikker på et link for at ændre en anden boks's farve skal den defaulte tilbage til det standard classname den havde.
Håber det er forståeligt ?
