Link div element aan <a> element
Al enige tijd zoek ik op internet naar een antwoord op de volgende vraag:
Eerst de opmaak
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<a href="#item_one">Item 1</a>
<a href="#item_two">Item 2</a>
<a href="#item_three">Item 3</a>
<a href="#item_four">Item 4</a>
<div id="item_one"></div>
<div id="item_two"></div>
<div id="item_three"></div>
<div id="item_four"></div>
<a href="#item_two">Item 2</a>
<a href="#item_three">Item 3</a>
<a href="#item_four">Item 4</a>
<div id="item_one"></div>
<div id="item_two"></div>
<div id="item_three"></div>
<div id="item_four"></div>
Nu zoek ik een oplossing om de items met de hash te koppelen aan de ID met pure Javascript.
Is er iemand die er ervaring in heeft met pure javascript? Met Jquery lukt het wel, maar dit zou ook met pure Javascript moeten lukken?
Wat bedoel je met "koppelen"? Wat wil je precies bereiken?
Met Jquery heb ik al een tabmenu gemaakt maar wil graag weten hoe je dit in pure Javascript kunt doen. op internet heb ik veel gezocht maar er is weinig over te vinden helaas, daarom probeer ik het via hier :)
http://www.w3schools.com/jsref/event_onclick.asp
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<body>
<a href="#item_one" onclick="myFunction('item_one'); return false;">Item 1</a>
<a href="#item_two" onclick="myFunction('item_two'); return false;">Item 2</a>
<a href="#item_three" onclick="myFunction('item_three'); return false;">Item 3</a>
<a href="#item_four" onclick="myFunction('item_four'); return false;">Item 4</a>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
<div id="item_one">item_one</div>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
<div id="item_two">item_two</div>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
<div id="item_three">item_three</div>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
<div id="item_four">item_four</div>
<script>
function myFunction(item) {
document.getElementById(item).innerHTML = '<p>' + item + ' Hello World</p>';
window.location = (""+window.location).replace(/#[A-Za-z0-9_]*$/,'')+"#"+item;
}
</script>
</body>
</html>
<html>
<body>
<a href="#item_one" onclick="myFunction('item_one'); return false;">Item 1</a>
<a href="#item_two" onclick="myFunction('item_two'); return false;">Item 2</a>
<a href="#item_three" onclick="myFunction('item_three'); return false;">Item 3</a>
<a href="#item_four" onclick="myFunction('item_four'); return false;">Item 4</a>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
<div id="item_one">item_one</div>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
<div id="item_two">item_two</div>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
<div id="item_three">item_three</div>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
<div id="item_four">item_four</div>
<script>
function myFunction(item) {
document.getElementById(item).innerHTML = '<p>' + item + ' Hello World</p>';
window.location = (""+window.location).replace(/#[A-Za-z0-9_]*$/,'')+"#"+item;
}
</script>
</body>
</html>
Jop B op 16/11/2016 20:45:37:
Met Jquery heb ik al een tabmenu gemaakt maar wil graag weten hoe je dit in pure Javascript kunt doen.
Het kan ook met CSS, zonder jQuery en JavaScript:
https://stanhub.com/tutorials/responsive-horizontal-css-only-tabs/