Bootstrap 4 tabbed menu

[Koffie32]

Volgens mij moet dit vrij eenvoudig te doen zijn met JQuery maar ik ben er absoluut niet bekend mee.

Wat ik wil is dat er op het moment dat er geklikt wordt op een van de list elementen de klasse active aan dat betreffende element mee wordt gegeven en wordt verwijderd bij het element waar active als klasse stond.

Volgens mij moet het volgende codefragment voldoende zijn om inzicht te krijgen in de code. Mocht er nog iets nodig zijn roep dan gerust.

code:

<div class="row">
        <div class="col-sm-12">
            <div class="card custom-card">
                <div class="card-body">
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link" href="?overzicht=A">A</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="?overzicht=B">B</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="?overzicht=C">C</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="?overzicht=D">D</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="?overzicht=E">E</a>
                        </li>
                    </ul>
                    <div class="custom-pag-overzicht">
                        <?php include('incl/' . $paginaInhoud . '.php'); ?>
                    </div>
                </div>
            </div>
        </div>
    </div>

[TI_Observer]

$('.nav-tabs .nav-item').on('click', function() {
$(this).siblings().removeClass('active')
$(this).addClass('active')
} )

[Koffie32]

sheez88 schreef op zaterdag 10 februari 2018 @ 21:39:
$('.nav-tabs .nav-item').on('click', function() {
$(this).siblings().removeClass('active')
$(this).addClass('active')
} )

Dit lijkt niets te doen als ik het tussen <script> tags zet. Kan dit er aan liggen dat de JQuery library pas aan het einde van het document wordt toegevoegd?

[HollowGamer]

Koffie32 schreef op zaterdag 10 februari 2018 @ 21:51:
[...]

Dit lijkt niets te doen als ik het tussen <script> tags zet. Kan dit er aan liggen dat de JQuery library pas aan het einde van het document wordt toegevoegd?

Daarvoor heb je de .ready() method.
Lijkt me goed om je even in te lezen hoe jQuery werkt, zo moeilijk is het niet.

Dit gaat trouwens niet werken:

code:

<div class="custom-pag-overzicht">
   <?php include('incl/' . $paginaInhoud . '.php'); ?>
</div>

Zoek eens op jQuery tabs.

[Verwijderd]

Vraag zit er meer in of dat inderdaad het probleem is en hoe ik ready op de juiste manier gebruik.

Overigens werkt dat stukje code perfect. PaginaInhoud wordt opgehaald uit $_GET.

[botwood]

Ik denk dat je hier een eind mee komt.

<script type=“text/javascript”>

$(document).ready(function(){
// code van sheez88 hier plaatsen

});
</script>

[Terando]

botwood schreef op zondag 11 februari 2018 @ 09:59:
Ik denk dat je hier een eind mee komt.

<script type=“text/javascript”>

$(document).ready(function(){
// code van sheez88 hier plaatsen

});
</script>

Dit gaat ook niet werken als jQuery nog niet ingeladen is (zoals in eerdere post aangegeven).

@Koffie32 Als je code schrijft voor jQuery is het slim om deze code pas in te laden nadat jQuery klaar is, om logische redenen (je kan geen functies gebruiken die nog niet bestaan).

Hieronder een voorbeeld, inclusief de suggestie van @archie2012 :

code:

$(document).ready(function(){
  $('.nav-tabs').on('click', '.nav-item', function(event){
    $(this).parent().find('.active').removeClass('active');
    $(this).addClass('active');
  });
});

[kaassouffle]

Heeft bootstrap dat niet standaard (al dan niet met plugin) in het 'pakket' zitten ? Met voorbeeldcode op de website ?

[moijamie]

Verwijderd schreef op zondag 11 februari 2018 @ 00:25:
Vraag zit er meer in of dat inderdaad het probleem is en hoe ik ready op de juiste manier gebruik.

Overigens werkt dat stukje code perfect. PaginaInhoud wordt opgehaald uit $_GET.

Heb je ook rekkening gehouden met path traversal, aangezien je het hebt over een $_GET variabele.

https://www.owasp.org/index.php/Path_Traversal

[Finder]

Ik zou je aanraden om gewoon eens de 3 pagina's van de handleiding te lezen. Zoals hierboven aangegeven, dan wordt het veel eenvoudiger.

Dit is een aanrader: https://www.w3schools.com/jquery/jquery_syntax.asp

[M0nkeymen]

Finder schreef op vrijdag 16 februari 2018 @ 09:59:
Ik zou je aanraden om gewoon eens de 3 pagina's van de handleiding te lezen. Zoals hierboven aangegeven, dan wordt het veel eenvoudiger.

Dit is een aanrader: https://www.w3schools.com/jquery/jquery_syntax.asp

verwijs hem dan naar "officiele" documentatie
http://learn.jquery.com/about-jquery/how-jquery-works/
http://learn.jquery.com/

[Koffie32]

Het leek mij wel even netjes om te laten weten dat het inmiddels is gelukt.

Een hoop rommel mogen opruimen die ik gemaakt had en uiteindelijk toch gekozen voor een ander soort overzicht.