CMS-CSE/core/views/pages/cms.stats.php

<header class="d-flex flex-column flex-md-row align-items-md-center p-3 bg-light ">
<h2 class="bd-title" id="content">
    <span>Base RH : Statistiques sur les salariés</span>
</h2>
</header>
<?php   
        echo core::filAriane(array(
            "current" => "Statistiques sur les salariés", 
            "arbo" => array( 
                "Salariés RH" => NULL, 
                "Statistiques sur les salariés" => "/")
        )); 
?>
<ul class="nav nav-tabs" id="stats" role="tablist" style="margin-top: 40px;">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" id="stats-general-tab" role="tab" aria-selected="true">Général</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" id="stats-an-entree-tab" role="tab">Par année d'entrée</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" id="stats-femmes-hommes-tab" role="tab">Femmes / Hommes</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" id="stats-contrats-tab" role="tab">Contrats actifs</a>
    </li>
</ul>

<div class="tab-content">
    <div id="tab-stats-general"> 
        <?php get::page("stats-general") ?>
    </div>
    <div id="tab-stats-an-entree" style="display: none;"> 
        <?php get::page("stats-an-entree") ?>
    </div>
    <div id="tab-stats-femmes-hommes" style="display: none;"> 
        <?php get::page("stats-femmes-hommes") ?>
    </div>
    <div id="tab-stats-contrats" style="display: none;"> 
        <?php get::page("stats-contrats") ?>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("#stats-general-tab").click(function() {
            $("#tab-stats-general").show();
            $("#tab-stats-an-entree").hide();
            $("#tab-stats-femmes-hommes").hide();
            $("#tab-stats-contrats").hide();
        });
        $("#stats-an-entree-tab").click(function() {
            $("#tab-stats-general").hide();
            $("#tab-stats-an-entree").show();
            $("#tab-stats-femmes-hommes").hide();
            $("#tab-stats-contrats").hide();
        });
        $("#stats-femmes-hommes-tab").click(function() {
            $("#tab-stats-general").hide();
            $("#tab-stats-an-entree").hide();
            $("#tab-stats-femmes-hommes").show();
            $("#tab-stats-contrats").hide();
        });
        $("#stats-contrats-tab").click(function() {
            $("#tab-stats-general").hide();
            $("#tab-stats-an-entree").hide();
            $("#tab-stats-femmes-hommes").hide();
            $("#tab-stats-contrats").show();
        });
    })
</script>