Tabs systeem zo modulair mogelijk

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Top Low-Code Developer Gezocht!

Bedrijfsomschrijving Unieke Kansen, Uitstekende Arbeidsvoorwaarden & Inspirerend Team Wij zijn een toonaangevende, internationale organisatie die de toekomst van technologie vormgeeft door het creëren van innovatieve en baanbrekende oplossingen. Ons succes is gebaseerd op een hecht en gepassioneerd team van professionals die altijd streven naar het overtreffen van verwachtingen. Als jij deel wilt uitmaken van een dynamische, vooruitstrevende en inspirerende werkomgeving, dan is dit de perfecte kans voor jou! Functieomschrijving Als Low-Code Developer ben je een cruciaal onderdeel van ons team. Je werkt samen met collega's uit verschillende disciplines om geavanceerde applicaties te ontwikkelen en te optimaliseren met behulp van Low-code

Bekijk vacature »

Ventilatiesysteem Productontwikkelaar HBO WO Verwa

Samengevat: Zij bieden flexibele ventilatiematerialen, geluidsdempers, rookgasafvoer producten en industrieslangen. Ben jij een technisch productontwikkelaar? Heb jij ervaring met het ontwikkelen van nieuwe producten? Vaste baan: Technisch Productontwikkelaar HBO WO €3.000 - €4.000 Zij bieden een variëteit aan flexibele ventilatiematerialen, geluiddempers, rookgasafvoer producten, industrieslangen en ventilatieslangen voor de scheepsbouw. Met slimme en innovatieve materialen zorgen wij voor een gezonde en frisse leefomgeving. Deze werkgever is een organisatie die volop in ontwikkeling is met hardwerkende collega's. Dit geeft goede ontwikkelingsmogelijkheden. De branche van dit bedrijf is Techniek en Engineering. Functie: Voor de vacature als Technisch Productontwikkelaar Ede Gld HBO WO ga

Bekijk vacature »

Jan Graneker

Jan Graneker

25/09/2018 20:02:43
Quote Anchor link
Goedenavond Leden,

Zou iemand mijn script willen bekijken en advies willen geven hoe ik dit het beste aan zou kunnen pakken?

https://codepen.io/anon/pen/wELQJG

Wat houdt het in?

- Ik heb 4 tabs en elke tab heeft zijn eigen stukje tekst.
- Ik heb de actives van zowel de content als van de tabs verwijderd.

Hoe ga ik nu verder? Hoe kan ik nu ervoor zorgen dan wanneer de bezoeker op tab3 klikt hij ook content-block-3 ziet verschijnen?
Is dit ook modulair te maken, dus stel ik voer een 5de tab in dat hij dit ook gewoon oppakt.

Zou ik kunnen zeggen; Wanneer men op tab-1 klikt, zet dan een Active/show content-block-1?

Alle tips en tricks zijn welkom.
 
PHP hulp

PHP hulp

28/03/2024 15:29:10
 
Adoptive Solution

Adoptive Solution

25/09/2018 22:08:21
Quote Anchor link
Na wat zoeken vond ik dit wat naar mijn idee doet wat u wilt.

https://www.w3schools.com/howto/howto_js_tabs.asp
 
Thomas van den Heuvel

Thomas van den Heuvel

25/09/2018 22:33:50
Quote Anchor link
EDIT: ik denk dat je er bijna bent/was? je moet enkel op een of andere manier weten op welk item is geklikt, en dit in code vertalen naar welke tab je wilt tonen.

Als je het echt generiek wilt maken zou ik proberen om de id's eruit te kieperen, in zekere zin zijn beide oplossingen in dat opzicht niet echt generiek.
EDIT: meh, maar je moet deze nog steeds op een of andere manier identificeren. De oplossing van @Adoptive is even goed/beter als je geen extra lib wilt inzetten en je het niet erg vindt dat er inline JavaScript wordt gebruikt.

Ook loont het misschien de moeite om een framework te gebruiken (zoals jQuery) om wat beter cross browser compatibiliteit te garanderen. Is er een reden om de aansturing in (native) JavaScript te regelen of een bezwaar om dit niet te doen?

Vaak is de aanpak te vangen in het volgende "patroon": op je pagina heeft een bepaald gebied bepaalde (klik)functionaliteit. De beste (? of iig een) manier om dit te bereiken is door dit gebied af te bakenen met een container (bijvoorbeeld een div). Vervolgens hang je een class aan deze div en daarna hang je de functionaliteit op aan de div (of divs) met deze class.

Daarnaast kun je functioneel beschrijven wat het zou moeten doen: je hebt een rij van links die correspondeert met een rij divs. Klik je op een link dan moet het volgende gebeuren:
- de vorige div moet verborgen worden
- de huidige div corresponderend met de link moet getoond worden
- (extra) de (nieuwe) link moet "gehighlight" worden zodat je weet welke actief is

Als je dit functioneel kunt beschrijven volgt vaak de boodschappenlijst van werk die je in code moet verzetten automatisch (dit heet ook wel een specificatie :p).

Voorbeeld (ook even wat extra zut toegevoegd om te demonstreren dat het redelijk generiek is):
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
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>generic tabs</title>
<style type="text/css">
*                               { font-family: sans-serif; }
.main                           { width: 500px; }
.tab-container-head             { line-height: 25px; }
.tab-container-head a           { display: block; float: left; padding: 0 10px; height: 25px; text-decoration: none; background-color: #aaffaa; color: #000000; }
.tab-container-head a.active    { background-color: #ffaaaa; }
.tab-container                  { background-color: #ffaaaa; }
.tab-container div              { display: none; padding: 10px; }
.tab-container div.active       { display: block; }
.clearfix::after                { content: ''; display: block; clear: both; }
</style>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
</head>

<body>
<div class="main">
    <div class="tab-container-head clearfix">
        <a href="javascript:void(0)" data-target="one" class="active">een</a>
        <a href="javascript:void(0)" data-target="two">twee</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
    </div>
    <div class="tab-container">
        <div class="active" data-tab="one">een</div>
        <div data-tab="two">twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee </div>
        <div data-tab="three">drie</div>
    </div>
    <br>
    <div class="tab-container-head clearfix">
        <a href="javascript:void(0)" data-target="one" class="active">een</a>
        <a href="javascript:void(0)" data-target="two">twee</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
    </div>
    <div class="tab-container">
        <div class="active" data-tab="one">een</div>
        <div data-tab="two">twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee </div>
        <div data-tab="three">drie</div>
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    $('.tab-container-head a').click(function(e) {
        e.preventDefault();
        var $tabContainerHead = $(this).parent();
        var $tabContainer = $(this).parent().next(); // assumption: tab-container immediately follows tab-container-head
        var target = $(this).attr('data-target');

        $tabContainerHead.find('a').removeClass('active');
        $tabContainer.find('div').hide(); // hide all

        $tabContainer.find('div[data-tab='+target+']').show(); // show selected
        $(this).addClass('active');
    });
});
//]]>
</script>
</body>
</html>
Gewijzigd op 25/09/2018 23:20:41 door Thomas van den Heuvel
 
Ward van der Put
Moderator

Ward van der Put

26/09/2018 09:56:39
 
Jan Graneker

Jan Graneker

26/09/2018 14:01:45
Quote Anchor link
Bedankt voor je uitgebreide reactie Thomas, echt super.

"een of andere manier weten op welk item is geklikt, en dit in code vertalen naar welke tab je wilt tonen."

Dat is het inderdaad helemaal.

Ik wil alle html/css/js/ gescheiden houden, inline js is dan geen optie. Vandaar dat ik juist het voorbeeld van W3cschools niet wil gebruiken.

Het generieke is misschien een ultiem doel en in dit geval minder haalbaar.

Ik ben vooral bezig om Javascript vanaf de core te begrijpen, daarom wil ik op dit moment Jquery niet gebruiken).

Ik heb hier inderdaad nog geen PSS/PSD van gemaakt, goed dat je het zegt, hier zou ik altijd al mee moeten beginnen.
Jouw code ga ik nog even grondig bestuderen.

Op basis van de huidige code en met de vraag (een of andere manier weten op welk item is geklikt, en dit in code vertalen naar welke tab je wilt tonen)

Welke aanpak zou hier dan het beste bij passen. Ik wil dus eigenlijk 2 data-attributen koppelen.
data-link-1 en data-content-1 enzovoorts.

Nu zou ik dit kunnen oplossen d.m.v. een onclick op data-link-1, show dan data-content-1.
Probleem is dat ik de code dan 5 keer moeten herhalen (2,3,4,5).

Sorry voor de iets warrige uitleg, maar hoe zou ik dit kunnen oplossen?





Thomas van den Heuvel op 25/09/2018 22:33:50:
EDIT: ik denk dat je er bijna bent/was? je moet enkel op een of andere manier weten op welk item is geklikt, en dit in code vertalen naar welke tab je wilt tonen.

Als je het echt generiek wilt maken zou ik proberen om de id's eruit te kieperen, in zekere zin zijn beide oplossingen in dat opzicht niet echt generiek.
EDIT: meh, maar je moet deze nog steeds op een of andere manier identificeren. De oplossing van @Adoptive is even goed/beter als je geen extra lib wilt inzetten en je het niet erg vindt dat er inline JavaScript wordt gebruikt.

Ook loont het misschien de moeite om een framework te gebruiken (zoals jQuery) om wat beter cross browser compatibiliteit te garanderen. Is er een reden om de aansturing in (native) JavaScript te regelen of een bezwaar om dit niet te doen?

Vaak is de aanpak te vangen in het volgende "patroon": op je pagina heeft een bepaald gebied bepaalde (klik)functionaliteit. De beste (? of iig een) manier om dit te bereiken is door dit gebied af te bakenen met een container (bijvoorbeeld een div). Vervolgens hang je een class aan deze div en daarna hang je de functionaliteit op aan de div (of divs) met deze class.

Daarnaast kun je functioneel beschrijven wat het zou moeten doen: je hebt een rij van links die correspondeert met een rij divs. Klik je op een link dan moet het volgende gebeuren:
- de vorige div moet verborgen worden
- de huidige div corresponderend met de link moet getoond worden
- (extra) de (nieuwe) link moet "gehighlight" worden zodat je weet welke actief is

Als je dit functioneel kunt beschrijven volgt vaak de boodschappenlijst van werk die je in code moet verzetten automatisch (dit heet ook wel een specificatie :p).

Voorbeeld (ook even wat extra zut toegevoegd om te demonstreren dat het redelijk generiek is):
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
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>generic tabs</title>
<style type="text/css">
*                               { font-family: sans-serif; }
.main                           { width: 500px; }
.tab-container-head             { line-height: 25px; }
.tab-container-head a           { display: block; float: left; padding: 0 10px; height: 25px; text-decoration: none; background-color: #aaffaa; color: #000000; }
.tab-container-head a.active    { background-color: #ffaaaa; }
.tab-container                  { background-color: #ffaaaa; }
.tab-container div              { display: none; padding: 10px; }
.tab-container div.active       { display: block; }
.clearfix::after                { content: ''; display: block; clear: both; }
</style>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
</head>

<body>
<div class="main">
    <div class="tab-container-head clearfix">
        <a href="javascript:void(0)" data-target="one" class="active">een</a>
        <a href="javascript:void(0)" data-target="two">twee</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
    </div>
    <div class="tab-container">
        <div class="active" data-tab="one">een</div>
        <div data-tab="two">twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee </div>
        <div data-tab="three">drie</div>
    </div>
    <br>
    <div class="tab-container-head clearfix">
        <a href="javascript:void(0)" data-target="one" class="active">een</a>
        <a href="javascript:void(0)" data-target="two">twee</a>
        <a href="javascript:void(0)" data-target="three">drie</a>
    </div>
    <div class="tab-container">
        <div class="active" data-tab="one">een</div>
        <div data-tab="two">twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee </div>
        <div data-tab="three">drie</div>
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    $('.tab-container-head a').click(function(e) {
        e.preventDefault();
        var $tabContainerHead = $(this).parent();
        var $tabContainer = $(this).parent().next(); // assumption: tab-container immediately follows tab-container-head
        var target = $(this).attr('data-target');

        $tabContainerHead.find('a').removeClass('active');
        $tabContainer.find('div').hide(); // hide all

        $tabContainer.find('div[data-tab='+target+']').show(); // show selected
        $(this).addClass('active');
    });
});
//]]>
</script>
</body>
</html>


Toevoeging op 26/09/2018 14:03:37:

Ward van der Put op 26/09/2018 09:56:39:


Dat ziet er erg solide uit! Op dit moment nog iets te hoog gegrepen voor mij ben ik bang.

Maar erg bedankt voor je reactie Ward. Ik ga het alsnog even uitpluizen.
 
Thomas van den Heuvel

Thomas van den Heuvel

27/09/2018 01:36:10
Quote Anchor link
Jan Graneker op 26/09/2018 14:01:45:
Op basis van de huidige code en met de vraag (een of andere manier weten op welk item is geklikt, en dit in code vertalen naar welke tab je wilt tonen)

Welke aanpak zou hier dan het beste bij passen. Ik wil dus eigenlijk 2 data-attributen koppelen.

Het volgende is niet denigrerend bedoeld, maar vaak kunnen dit soort deelproblemen met eenvoudig verwoorde wensen bij elkaar geGoogled worden. Zo grabbel ik ook vaak mijn jQuery snippets bij elkaar, als ik zelf ook even niet direct de juiste/kortste syntax of simpelste aanpak weet.

Het helpt je (ook) om te realiseren dat jouw/iemands programmeerproblemen niet uniek zijn :). Iemand is hier al eens tegenaan gelopen, en iemand heeft dit vaak ook al opgelost.

Tijdens mijn zoektocht kwam ik een potentieel simpelere oplossing tegen. Het is namelijk mogelijk om vrij eenvoudig met jQuery (met .index()), maar ook in native JavaScript de index in een reeks van siblings te bepalen. Dit zou de verplichting van het gebruik van data- of id-attributen voor de verwijzing tab --> div mogelijk helemaal kunnen opheffen. Je zou namelijk tab met volgnummer X kunnen "koppelen" aan de content-div met volgnummer X, zonder extra administratie maar enkel op basis van volgorde, wat in zekere zin al best logisch is.

versie 2:
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
66
67
68
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>generic tabs</title>
<style type="text/css">
*                               { font-family: sans-serif; }
.main                           { width: 500px; }
.tab-container-head             { line-height: 25px; }
.tab-container-head a           { display: block; float: left; padding: 0 10px; height: 25px; text-decoration: none; background-color: #aaffaa; color: #000000; }
.tab-container-head a.active    { background-color: #ffaaaa; }
.tab-container                  { background-color: #ffaaaa; }
.tab-container div              { display: none; padding: 10px; }
.tab-container div.active       { display: block; }
.clearfix::after                { content: ''; display: block; clear: both; }
</style>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
</head>

<body>
<div class="main">
    <div class="tab-container-head clearfix">
        <a href="javascript:void(0)">een</a>
        <a href="javascript:void(0)">twee</a>
        <a href="javascript:void(0)">drie</a>
        <a href="javascript:void(0)" class="active">vier</a>
    </div>
    <div class="tab-container">
        <div>een</div>
        <div>twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee </div>
        <div>drie</div>
        <div class="active">vierrrrrrr</div>
    </div>
    <br>
    <div class="tab-container-head clearfix">
        <a href="javascript:void(0)">een</a>
        <a href="javascript:void(0)" class="active">twee</a>
        <a href="javascript:void(0)">drie</a>
    </div>
    <div class="tab-container">
        <div>een</div>
        <div class="active">twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee twee </div>
        <div>drie</div>
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    $('.tab-container-head a').click(function(e) {
        e.preventDefault();
        var $tabContainerHead = $(this).parent();
        var $tabContainer = $tabContainerHead.next(); // assumption: tab-container immediately follows tab-container-head
        var index = $(this).index();

        $tabContainerHead.find('a').removeClass('active'); // remove active class from tab
        $tabContainer.find('div').hide(); // hide all divs

        $tabContainer.children().eq(index).show(); // show selected
        $(this).addClass('active'); // mark current tab as active
    });
});
//]]>
</script>
</body>
</html>
Gewijzigd op 27/09/2018 12:28:42 door Thomas van den Heuvel
 
Jan Graneker

Jan Graneker

01/10/2018 20:50:19
Quote Anchor link
Bedankt voor jouw reactie Thomas. Ik heb mijn vraag inderdaad te vroeg gesteld. Jouw opmerking over de siblings heeft mij wel de goede richting ingeduwd en heb het weten op te lossen. Toevallig ben ik net een artikel aan het lezen over het debuggen en stellen van goede vragen, daar heeft deze al wat te kort komingen in.

Bedankt voor het beantwoorden van mijn vraag en de hulp waar ik naar zocht.
 



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.