File "main_004.php"

Full Path: /home/analogde/www/Chart burndown/main_004.php
File size: 2.22 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creating Basic Tabs in Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a href="#saisie" class="nav-link active">Saisie planning</a>
        </li>
        <li class="nav-item">
            <a href="#pointage" class="nav-link">Temps passé &&&</a>
        </li>
        <li class="nav-item">
            <a href="#graphique1" class="nav-link">Courbes 1</a>
        </li>
        <li class="nav-item">
            <a href="#graphique2" class="nav-link">Courbes 2</a>
        </li>
    </ul>
</div>

<div class="tab-content">
    <div id="saisie" class="tab-pane fade show active">
        <?php include 'table_001.php'; ?>
    </div>
    <div id="pointage" class="tab-pane fade mx-5">
        <?php include 'debug_insert_001.php'; ?>
    </div>
    <div id="graphique1" class="tab-pane fade mx-5">
        <h2>Burndown en escalier</h2>
        <?php include 'burndown_type01.php'; ?>
    </div>
    <div id="graphique2" class="tab-pane fade mx-5">
        <h2>Burdown classique</h2>
        <?php include 'traitement0019.php'; ?>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const tabs = document.querySelectorAll(".nav-link");
    const tabContents = document.querySelectorAll(".tab-pane");

    tabs.forEach(tab => {
        tab.addEventListener("click", function (event) {
            event.preventDefault();
            const target = document.querySelector(tab.getAttribute("href"));

            tabs.forEach(t => t.classList.remove("active"));
            tabContents.forEach(tc => tc.classList.remove("show", "active"));

            tab.classList.add("active");
            target.classList.add("show", "active");
        });
    });
});
</script>
</body>
</html>