Div kleur veranderen na klik
<a href="Home.html" onclick="myunction();"><div class = "button">Home</div></a>
function myfunction () {
document.getElementsByClassName(button)
}
en dan de kleur aanpassen?
Als dat idd zo is kan je op elke pagina de knop bijv de class current meegeven.
Om je JS kennis te verrijken. Je zou het zoiets doen (ervan uit gaand dat je een class .current hebt voor de stijl):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul id=menu>
<li><a href="home.html">Home</a></li>
<!-- ... -->
</ul>
<script>
var menu = document.getElementById('menu'); // krijg #menu
var listItems = document.getElementsByTagName('li'); // alle <li> elementen in #menu
// foreach in JS
[].forEach.call(listItems, function (elem) {
// we stellen het onclick element in, dit gaan we niet meer inline in HTML doen
elem.onlick = function (e) {
// this is het huidige element en
// className is de class attribuut
this.className += ' current'; // voeg de current class toe
});
});
</script>
<li><a href="home.html">Home</a></li>
<!-- ... -->
</ul>
<script>
var menu = document.getElementById('menu'); // krijg #menu
var listItems = document.getElementsByTagName('li'); // alle <li> elementen in #menu
// foreach in JS
[].forEach.call(listItems, function (elem) {
// we stellen het onclick element in, dit gaan we niet meer inline in HTML doen
elem.onlick = function (e) {
// this is het huidige element en
// className is de class attribuut
this.className += ' current'; // voeg de current class toe
});
});
</script>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(disclaimer: code is niet getest ;-) )
Gewijzigd op 20/05/2013 16:42:37 door Willem vp
<a href="Home.html"><div class="button" onclick="myfunction();" style="background-color:#FF0000;">Home</div></a>
<script>
function myfunction()
{
var divs = document.getElementsByClassName("button");
for(i = 0; i < divs.length; i++)
{
divs.style.backgroundColor = "#FFD700";
}
}
</script>
en met deze veranderd alleen de div waar je op drukt van kleur:
<a><div class="button" onclick="myfunction(this);" style="background-color:#FF0000;">Home</div></a>
<script>
function myfunction(e)
{
e.style.backgroundColor = "#FFD700";
}
</script>