Différences

Ci-dessous, les différences entre deux révisions de la page.

--- madoc:testveneta [2023/01/25 16:31]
andreeva-v supprimée
+++ — (Version actuelle)
@@ Ligne 1: / Ligne 1: @@
-<html>
-<head></head>
-<style>
-.tabs ul{
-   display:flex;
-   flex-flow: row wrap;
-   align-items: center;
-   height: 5em;
-   border: solid 1px blue;
-   font-size: 20px;
-   margin:0;
-}
-.tabs ul li{
-  width:calc(100%/3);
-}
-.first-level-tab-results{
-  display:flex;
-  flex-direction: row;
-}
-a{
-  text-decoration: none;
-}
-.tab-content {
-   display: none;
-}
-.is-active {
-   display: flex;
-}
-section .sub-tabs{
-  display:flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  background-color:rgb(218, 218, 218);
-  margin:0;
-  padding: 1.5em;
-  min-height: 8em;
-}
-.sub-tab-content{
-  background-color: blue;
-  padding:1.5em;
-}
-body {
-  padding: 20px;
-}
-</style>
-<body>
-<div class="my-tabs">
-    <nav class="tabs">
-      <ul>
-        <li class="is-active"><a href="#tab-one">Découvrir et paramétrer mon espace</a></li>
-        <li><a href="#tab-two">Organiser mon espace d'enseignement</a></li>
-        <li><a href="#tab-three">Créer des ressources et les organiser</a></li>
-        <li><a href="#tab-two">Organiser mon espace d'enseignement</a></li>
-        <li><a href="#tab-three">Créer des ressources et les organiser</a></li>
-        <li><a href="#tab-two">Organiser mon espace d'enseignement</a></li>
-      </ul>
-    </nav>
-    <div class="first-level-tab-results">
-      <section class="tab-content is-active" id="tab-one">
-        <ul class="sub-tabs">
-          <li><a href="#tab-one-one">Accéder à un espace de cours</a></li>
-          <li><a href="#tab-one-two">Gérer les utilisateur</a></li>
-          <li><a href="#tab-one-three">Paramétrer un espace de cours</a></li>
-        </ul>
-        <div class="sub-tab-content">
-        <section class="tab-content" id="tab-one-one">
-        Sub-Section One</section>
-        <section class="tab-content" id="tab-one-two">
-        Section Two</section>
-        <section class="tab-content" id="tab-one-three">
-        Section Three</section>
-    </section>
-    <section class="tab-content" id="tab-two">
-      Section Two</section>
-    <section class="tab-content" id="tab-three">
-      Section Three</section>
-  </div>
-</div>
-</body>
-<script>
-const tabs = document.querySelectorAll(".my-tabs .tabs li");
-const sections = document.querySelectorAll(".my-tabs .tab-content");
-const subTabs = document.querySelectorAll(".my-tabs .sub-tabs li");
-const subSections = document.querySelectorAll(".sub-tab-content .tab-content");
-tabs.forEach(tab => {
-  tab.addEventListener("click", e => {
-    e.preventDefault();
-    removeActiveTab();
-    addActiveTab(tab);
-  });
-})
-subTabs.forEach(tab => {
-  tab.addEventListener("click", e => {
-    e.preventDefault();
-    removeActiveSubTab();
-    addActiveTab(tab);
-  });
-})
-const removeActiveTab = () => {
-  tabs.forEach(tab => {
-    tab.classList.remove("is-active");
-  });
-  sections.forEach(section => {
-    section.classList.remove("is-active");
-  });
-}
-const removeActiveSubTab = () => {
-  subTabs.forEach(subTab => {
-    subTab.classList.remove("is-active");
-  });
-  subSections.forEach(subSection => {
-    subSection.classList.remove("is-active");
-  });
-}
-const addActiveTab = tab => {
-  tab.classList.add("is-active");
-  const href = tab.querySelector("a").getAttribute("href");
-  const matchingSection = document.querySelector(href);
-  matchingSection.classList.add("is-active");
-}
-</script>
-</html>

Recherche

Édition

Navigation

Différences