PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

Link div element aan <a> element

Door Jop B op 16-11-2016 19:48
3.124 views
Beste leden,

Al enige tijd zoek ik op internet naar een antwoord op de volgende vraag:

Eerst de opmaak


<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>


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?
Ozzie PHP
16-11-2016 20:20
>> om de items met de hash te koppelen aan de ID

Wat bedoel je met "koppelen"? Wat wil je precies bereiken?
J
Jop B
16-11-2016 20:45
Deze items wil ik koppelen als er bijvoorbeeld een klik event plaats vind er iets gebeurt met het gekoppelde div element.
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 :)
J
Jop B
16-11-2016 21:30
Adoptive Solution,

Dit is meer wat ik bedoel

Fiddle Alleen dan in pure Javascript :)
A
Adoptive Solution
16-11-2016 21:33
Behalve het aanpassen van de div, wil je er waarschijnlijk ook nog heen scrollen. Met behulp van de interwebs heb ik er dit van gemaakt :

<!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>

Reageren

Inloggen om te reageren