Functie vaker gebruiken op zelfde pagina

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

G Jansma

G Jansma

27/05/2017 08:26:04
Quote Anchor link
Hallo,

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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<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>
 
PHP hulp

PHP hulp

27/05/2026 07:15:01
 
- Ariën -
Beheerder

- Ariën -

27/05/2017 10:42:07
Quote Anchor link
Gebruik class attributen in je HTML-elementen, en een . (punt) als selector in je CSS en jQuery.
 
G Jansma

G Jansma

04/06/2017 10:32:33
Quote Anchor link
Nog even omhoog halen, uit het oog verloren. Ik heb 'id' vervangen door 'class' maar dat maakt praktisch geen verschil toch? Mijn vraag is meer hoe ik dezelfde functie meerdere keren kan gebruiken op dezelfde pagina. Ik heb het even NR1 en NR2 genoemd. Nu is NR2 ingeklapt (wat ik niet wil). Als ik een link van NR2 aanklik, dan klapt de boel bij NR1 in, dat wil ik dus niet. Ik wil dat alles is 'uitgeklapt'. Ik wil dit dus meerdere keren gaan gebruiken, maar ik neem aan dat ik dan niet x keer die code hoef te kopieren met telkens nieuwe divs toch?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<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>

/// NR1
<ul class="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 class="tabs-container">
    <div class="content1">Content for link 1. Should display only when Link 1 is clicked.</div>
    <div class="content2">Content for link 2. Should display only when Link 2 is clicked.</div>
    <div class="content3">Content for link 3. Should display only when Link 3 is clicked.</div>
    <div class="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 class="tabs-container-2">
    <div class="content1-2">Additional content for link 1. Should display only when Link 1 is clicked.</div>
    <div class="content2-2">Additional content for link 2. Should display only when Link 2 is clicked.</div>
    <div class="content3-2">Additional content for link 3. Should display only when Link 3 is clicked.</div>
    <div class="content4-2">Additional content for link 4. Should display only when Link 4 is clicked.</div>
</div>


/// NR2
<ul class="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 class="tabs-container">
    <div class="content1">Content for link 1. Should display only when Link 1 is clicked.</div>
    <div class="content2">Content for link 2. Should display only when Link 2 is clicked.</div>
    <div class="content3">Content for link 3. Should display only when Link 3 is clicked.</div>
    <div class="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 class="tabs-container-2">
    <div class="content1-2">Additional content for link 1. Should display only when Link 1 is clicked.</div>
    <div class="content2-2">Additional content for link 2. Should display only when Link 2 is clicked.</div>
    <div class="content3-2">Additional content for link 3. Should display only when Link 3 is clicked.</div>
    <div class="content4-2">Additional content for link 4. Should display only when Link 4 is clicked.</div>
</div>
Gewijzigd op 04/06/2017 10:33:49 door G Jansma
 
Thomas van den Heuvel

Thomas van den Heuvel

04/06/2017 14:01:59
Quote Anchor link
Als je wilt dat een tabs-list reageert op één tabs-cointainer lijkt het mij handiger om beide onderdelen samen in één overkoepelende container te stoppen zodat je lokale/relatieve verwijzigingen naar onderdelen binnen deze (overkoepelende) container kunt maken. Het is dan ook niet meer nodig om de onderdelen verschillende namen te geven. Tenzij deze een wat andere opmaak hebben maar dan kun je nog steeds één klasse gebruiken voor de click-functionaliteit en een additionele klasse voor afwijkende opmaak.

Het click-event is in zekere zin al een functie, dus het is niet nodig om deze vervolgens weer in een functie te stoppen. Wel doe je er verstandig aan de click events pas te registreren op het moment dat de pagina geladen is. Een typisch jQuery blok begint doorgaans altijd met:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$().ready(function() {
    // hier de rest van je code
});
Gewijzigd op 04/06/2017 14:02:36 door Thomas van den Heuvel
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.