File "main_001.php"

Full Path: /home/analogde/www/TP02/Tabs/main_001.php
File size: 1.79 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://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="#" class="nav-link active">Home</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Profile</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Messages</a>
        </li>
    </ul>
</div>

<div class="tab-content">
    <div id="home" class="tab-pane fade show active">
        <?php include 'table_001.php'; ?>
    </div>
    <div id="profile" class="tab-pane fade">
        <!-- Contenu de l'onglet Profile -->
    </div>
    <div id="messages" class="tab-pane fade">
        <!-- Contenu de l'onglet Messages -->
    </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>