Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
private
/
Tabs
:
main_001.php
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!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>