Dev Faq
5
votes

pourquoi l'onglet html n'affiche pas son contenu lorsqu'il est défini par actif?

affichage de certains onglets. tandis que la page html se charge sur le navigateur et affiche le contenu de celle-ci, elle doit donc afficher les informations du premier onglet car elle est activée. mais l'onglet actif n'affiche pas son contenu, ils fonctionnent après avoir cliqué sur l'onglet. Je veux simplement que lorsque je suis actif sur n'importe quel onglet, il doit afficher son contenu sans cliquer dessus. voici mon code. 

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style type="text/css">
         .sight_img{
         height: 80%;
         width: 100%;
         }
         .tab {
         overflow: hidden;
         border: 1px solid #ccc;
         background-color: #f1f1f1;
         }
         /* Style the buttons inside the tab */
         .tab button {
         background-color: inherit;
         float: left;
         border: none;
         outline: none;
         cursor: pointer;
         padding: 14px 16px;
         transition: 0.3s;
         font-size: 17px;
         }
         /* Change background color of buttons on hover */
         .tab button:hover {
         background-color: #ddd;
         }
         /* Create an active/current tablink class */
         .tab button.active {
         background-color: #ccc;
         display:block;
         }
         /* Style the tab content */
         .tabcontent {
         display: none;
         padding: 6px 12px;
         -webkit-animation: fadeEffect 1s;
         animation: fadeEffect 1s;
         }
         /* Fade in tabs */
         @-webkit-keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
         @keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
      </style>
   </head>
   <body>
      <div class="tab">
         <button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
         <button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
         <button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
         <button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
      </div>
      <!-- // content-tabs-i // -->
      <div id="Description" class="tabcontent">
         <h3>Description</h3>
      </div>
      <div id="Avalability" class="tabcontent">
         <h3>Avalability</h3>
      </div>
      <div id="Itinerary" class="tabcontent">
         <h3>Itinerary</h3>
      </div>
      <div id="Policy" class="tabcontent">
         <h3>Policy</h3>
      </div>
   </body>
</html>
<script>
   function openCity(evt, cityName) {
     var i, tabcontent, tablinks;
     tabcontent = document.getElementsByClassName("tabcontent");
     for (i = 0; i < tabcontent.length; i++) {
       tabcontent[i].style.display = "none";
     }
     tablinks = document.getElementsByClassName("tablinks");
     for (i = 0; i < tablinks.length; i++) {
       tablinks[i].className = tablinks[i].className.replace(" active", "");
     }
     document.getElementById(cityName).style.display = "block";
     evt.currentTarget.className += " active";
   }
</script>

ici, vous pouvez voir. après avoir cliqué sur l'onglet le contenu de ses onglets, il affiche même si j'ai utilisé la classe active sur le premier onglet. Je veux simplement que ces onglets affichent son contenu qui est défini par actif sans cliquer dessus.

4 commentaires

vous n'avez aucune valeur par défaut pour cela.

j'avais essayé ça aussi mais il n'y a toujours aucun effet

Ajoutez simplement la règle .active {display: block} au CSS et ajoutez cette classe à l'élément de tabulation par défaut. Notez que la règle doit être placée après la règle .tabcontent dans la feuille de style.

Oh super. son travail maintenant grâce

5 Réponses :

1
votes

Il vous manque display: block dans la classe active et vous ne postulez pas non plus au premier élément.

add class 

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <style type="text/css">

  </style>
</head>

<body>
  <div class="tab">
    <button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
    <button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
    <button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
    <button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
  </div>
  <!-- // content-tabs-i // -->
  <div id="Description" class="tabcontent active">
    <h3>Description</h3>
  </div>
  <div id="Avalability" class="tabcontent">
    <h3>Avalability</h3>
  </div>
  <div id="Itinerary" class="tabcontent">
    <h3>Itinerary</h3>
  </div>
  <div id="Policy" class="tabcontent">
    <h3>Policy</h3>
  </div>
</body>

</html>
<script>
  function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
  }
</script>

et

appliquer 

.sight_img {
  height: 80%;
  width: 100%;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
  display: block;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}


/* Fade in tabs */

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.active {
  display: block
}

 <div id="Description" class="tabcontent active">//added active
    <h3>Description</h3>
  </div>

.active {
  display: block
}

0 commentaires
1
votes

Ajouter un style display: block de Description du contenu de l'onglet au chargement 

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style type="text/css">
         .sight_img{
         height: 80%;
         width: 100%;
         }
         .tab {
         overflow: hidden;
         border: 1px solid #ccc;
         background-color: #f1f1f1;
         }
         /* Style the buttons inside the tab */
         .tab button {
         background-color: inherit;
         float: left;
         border: none;
         outline: none;
         cursor: pointer;
         padding: 14px 16px;
         transition: 0.3s;
         font-size: 17px;
         }
         /* Change background color of buttons on hover */
         .tab button:hover {
         background-color: #ddd;
         }
         /* Create an active/current tablink class */
         .tab button.active {
         background-color: #ccc;
         display:block;
         }
         /* Style the tab content */
         .tabcontent {
         display: none;
         padding: 6px 12px;
         -webkit-animation: fadeEffect 1s;
         animation: fadeEffect 1s;
         }
         /* Fade in tabs */
         @-webkit-keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
         @keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
      </style>
   </head>
   <body onload="loadFunction()">
      <div class="tab">
         <button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
         <button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
         <button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
         <button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
      </div>
      <!-- // content-tabs-i // -->
      <div id="Description" class="tabcontent">
         <h3>Description</h3>
      </div>
      <div id="Avalability" class="tabcontent">
         <h3>Avalability</h3>
      </div>
      <div id="Itinerary" class="tabcontent">
         <h3>Itinerary</h3>
      </div>
      <div id="Policy" class="tabcontent">
         <h3>Policy</h3>
      </div>
   </body>
</html>
<script>
   function loadFunction(){
     document.getElementById('Description').style.display = "block";
   }
   function openCity(evt, cityName) {
     var i, tabcontent, tablinks;
     tabcontent = document.getElementsByClassName("tabcontent");
     for (i = 0; i < tabcontent.length; i++) {
       tabcontent[i].style.display = "none";
     }
     tablinks = document.getElementsByClassName("tablinks");
     for (i = 0; i < tablinks.length; i++) {
       tablinks[i].className = tablinks[i].className.replace(" active", "");
     }
     document.getElementById(cityName).style.display = "block";
     evt.currentTarget.className += " active";
   }
</script>

0 commentaires
1
votes

Ajoutez style = "display: block;" à votre div tabcontent pour afficher votre div par défaut. 

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style type="text/css">
         .sight_img{
         height: 80%;
         width: 100%;
         }
         .tab {
         overflow: hidden;
         border: 1px solid #ccc;
         background-color: #f1f1f1;
         }
         /* Style the buttons inside the tab */
         .tab button {
         background-color: inherit;
         float: left;
         border: none;
         outline: none;
         cursor: pointer;
         padding: 14px 16px;
         transition: 0.3s;
         font-size: 17px;
         }
         /* Change background color of buttons on hover */
         .tab button:hover {
         background-color: #ddd;
         }
         /* Create an active/current tablink class */
         .tab button.active {
         background-color: #ccc;
         display:block;
         }
         /* Style the tab content */
         .tabcontent {
         display: none;
         padding: 6px 12px;
         -webkit-animation: fadeEffect 1s;
         animation: fadeEffect 1s;
         }
         /* Fade in tabs */
         @-webkit-keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
         @keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
      </style>
   </head>
   <body>
      <div class="tab">
         <button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
         <button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
         <button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
         <button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
      </div>
      <!-- // content-tabs-i // -->
      <div id="Description" class="tabcontent" style="display: block;">
         <h3>Description</h3>
      </div>
      <div id="Avalability" class="tabcontent">
         <h3>Avalability</h3>
      </div>
      <div id="Itinerary" class="tabcontent">
         <h3>Itinerary</h3>
      </div>
      <div id="Policy" class="tabcontent">
         <h3>Policy</h3>
      </div>
   </body>
</html>
<script>
   function openCity(evt, cityName) {
     var i, tabcontent, tablinks;
     tabcontent = document.getElementsByClassName("tabcontent");
     for (i = 0; i < tabcontent.length; i++) {
       tabcontent[i].style.display = "none";
     }
     tablinks = document.getElementsByClassName("tablinks");
     for (i = 0; i < tablinks.length; i++) {
       tablinks[i].className = tablinks[i].className.replace(" active", "");
     }
     document.getElementById(cityName).style.display = "block";
     evt.currentTarget.className += " active";
   }
</script>

0 commentaires
1
votes

vous pouvez utiliser Javascript pour "cliquer" sur le bouton de l'onglet spécifié: 

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style type="text/css">
         .sight_img{
         height: 80%;
         width: 100%;
         }
         .tab {
         overflow: hidden;
         border: 1px solid #ccc;
         background-color: #f1f1f1;
         }
         /* Style the buttons inside the tab */
         .tab button {
         background-color: inherit;
         float: left;
         border: none;
         outline: none;
         cursor: pointer;
         padding: 14px 16px;
         transition: 0.3s;
         font-size: 17px;
         }
         /* Change background color of buttons on hover */
         .tab button:hover {
         background-color: #ddd;
         }
         /* Create an active/current tablink class */
         .tab button.active {
         background-color: #ccc;
         display:block;
         }
         /* Style the tab content */
         .tabcontent {
         display: none;
         padding: 6px 12px;
         -webkit-animation: fadeEffect 1s;
         animation: fadeEffect 1s;
         }
         /* Fade in tabs */
         @-webkit-keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
         @keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
      </style>
   </head>
   <body>
      <div class="tab">
         <button class="tablinks" id="default" onclick="openCity(event, 'Description')">Description</button>
         <button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
         <button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
         <button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
      </div>
      <!-- // content-tabs-i // -->
      <div id="Description" class="tabcontent">
         <h3>Description</h3>
      </div>
      <div id="Avalability" class="tabcontent">
         <h3>Avalability</h3>
      </div>
      <div id="Itinerary" class="tabcontent">
         <h3>Itinerary</h3>
      </div>
      <div id="Policy" class="tabcontent">
         <h3>Policy</h3>
      </div>
   </body>
</html>
<script>
   function openCity(evt, cityName) {
     var i, tabcontent, tablinks;
     tabcontent = document.getElementsByClassName("tabcontent");
     for (i = 0; i < tabcontent.length; i++) {
       tabcontent[i].style.display = "none";
     }
     tablinks = document.getElementsByClassName("tablinks");
     for (i = 0; i < tablinks.length; i++) {
       tablinks[i].className = tablinks[i].className.replace(" active", "");
     }
     document.getElementById(cityName).style.display = "block";
     evt.currentTarget.className += " active";
   }
   document.getElementById("default").click();
</script>

document.getElementById("default").click();

0 commentaires
1
votes

vous avez une solution différente:

JS: appeler la fonction lors de l'événement de chargement avec 'Description' comme argument 

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style type="text/css">
         .sight_img{
         height: 80%;
         width: 100%;
         }
         .tab {
         overflow: hidden;
         border: 1px solid #ccc;
         background-color: #f1f1f1;
         }
         /* Style the buttons inside the tab */
         .tab button {
         background-color: inherit;
         float: left;
         border: none;
         outline: none;
         cursor: pointer;
         padding: 14px 16px;
         transition: 0.3s;
         font-size: 17px;
         }
         /* Change background color of buttons on hover */
         .tab button:hover {
         background-color: #ddd;
         }
         /* Create an active/current tablink class */
         .tab button.active {
         background-color: #ccc;
         display:block;
         }
         /* Style the tab content */
         .tabcontent {
         display: none;
         padding: 6px 12px;
         -webkit-animation: fadeEffect 1s;
         animation: fadeEffect 1s;
         }
         /* HERE */
         .tabcontent.active {
            display:block;
         }
         /* Or you can add a wrapper for your contents 
              and then use this selector, to set your default.*/
         .tabcontent:first-of-type {
            display:block;
         }
         /* Fade in tabs */
         @-webkit-keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
         @keyframes fadeEffect {
         from {opacity: 0;}
         to {opacity: 1;}
         }
      </style>
   </head>
   <body>
      <div class="tab">
         <button class="tablinks btn active" onclick="openCity(event, 'Description')">Description</button>
         <button class="tablinks" onclick="openCity(event, 'Avalability')">Avalability</button>
         <button class="tablinks" onclick="openCity(event, 'Itinerary')">Itinerary</button>
         <button class="tablinks" onclick="openCity(event, 'Policy')">Policy</button>
      </div>
      <!-- // content-tabs-i // -->
      <div>
      <div id="Description" class="tabcontent">
         <h3>Description</h3>
      </div>
      <div id="Avalability" class="tabcontent">
         <h3>Avalability</h3>
      </div>
      <div id="Itinerary" class="tabcontent">
         <h3>Itinerary</h3>
      </div>
      <div id="Policy" class="tabcontent">
         <h3>Policy</h3>
      </div>
      </div>
   </body>
</html>
<script>
   function openCity(evt, cityName) {
     var i, tabcontent, tablinks;
     tabcontent = document.getElementsByClassName("tabcontent");
     for (i = 0; i < tabcontent.length; i++) {
       tabcontent[i].style.display = "none";
     }
     tablinks = document.getElementsByClassName("tablinks");
     for (i = 0; i < tablinks.length; i++) {
       tablinks[i].className = tablinks[i].className.replace(" active", "");
     }
     document.getElementById(cityName).style.display = "block";
     evt.currentTarget.className += " active";
   }
</script>

CSS: ajoutez une classe active et ajoutez-la au premier div. 

.tabcontent:first-of-type {
   display:block;
}

Un autre CSS: enveloppez tout votre .tabcontent dans un div puis 

.tabcontent.active {
   display:block;
}

mais le dernier a plus d'avantage sur les autres car il est plus pratique dans fonctionnalités du futur que vous allez avoir. 

openCity(event, 'Description')

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO