Ik wil graag de inhoud van een div kunnen wijzigen dmv een aantal knoppen/linkjes, zoals in onderstaand voorbeeld dat ik vond via JSfiddle. Nu zou ik dat een keer of vijf willen gebruiken op dezelfde pagina, hoe zou ik dat het best in de functie kunnen wijzigen?
Is zoiets als onderstaande code ook mogelijk met alleen javascript, en zou dat beter zijn dan met jQuery? Ik lees soms dat mensen liever geen jQuery gebruiken in hun site.
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('#tabs-container div').hide().eq(0).show();
$('#tabs-container-2 div').hide().eq(0).show();
$('#tabs li').click(function () {
$('#tabs-container div').hide()
$('#tabs-container-2 div').hide()
num = $('#tabs li').index(this);
$('#tabs-container div').hide().eq(num).show();
$('#tabs-container-2 div').hide().eq(num).show();
});
});
</script>
//Eerste
<ul id="tabs">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
<div id="tabs-container">
<div id="content1">Content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2">Content for link 2. Should display only when Link 2 is clicked.</div>
<div id="content3">Content for link 3. Should display only when Link 3 is clicked.</div>
<div id="content4">Content for link 4. Should display only when Link 4 is clicked.</div>
</div>
<p>Unrelated text is here. Text in this area is static and should display at all times.</p>
<div id="tabs-container-2">
<div id="content1-2">Additional content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2-2">Additional content for link 2. Should display only when Link 2 is clicked.</div>
<div id="content3-2">Additional content for link 3. Should display only when Link 3 is clicked.</div>
<div id="content4-2">Additional content for link 4. Should display only when Link 4 is clicked.</div>
</div>
//Tweede
<ul id="tabs">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
<div id="tabs-container">
<div id="content1">Content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2">Content for link 2. Should display only when Link 2 is clicked.</div>
<div id="content3">Content for link 3. Should display only when Link 3 is clicked.</div>
<div id="content4">Content for link 4. Should display only when Link 4 is clicked.</div>
</div>
<p>Unrelated text is here. Text in this area is static and should display at all times.</p>
<div id="tabs-container-2">
<div id="content1-2">Additional content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2-2">Additional content for link 2. Should display only when Link 2 is clicked.</div>
<div id="content3-2">Additional content for link 3. Should display only when Link 3 is clicked.</div>
<div id="content4-2">Additional content for link 4. Should display only when Link 4 is clicked.</div>
</div>
