why html tab is not displaying its content when it set by active?

user_10644170 0
Viewed 563

displaying some tabs. while html page load on browser and display the content of it so it should display first tab information because it is set active. but active tab not displaying its content they are working after click on the tab. i simply want while i set active on any tab it should display its content without clicking on them. here is my 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>

here you can see. after clicking on the tab the content of its tabs it displaying even i used active class on the first tab. i just simply want those tab should display its content which is set by active without clicking on it.

css html javascript
5 Answers

You are missing display:block in active class and also you are not applying to the first element.

add class

.active {
  display: block
}

and

apply 

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


.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
}
<!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>

user_26308170

Add style display:block of Description of tab content on load

<!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>

user_85054970

Add style="display: block;" to your tabcontent div to show your default div.

<!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>

user_104258710

you can use Javascript to "click" on the specified tab button:

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


<!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>

user_78222450

you have some different solution :

JS : call the function at load event with 'Description' as it's arg

openCity(event, 'Description')

CSS: add an active class and add it to the first div.

.tabcontent.active {
   display:block;
}

Another CSS: wrap all your .tabcontent in a div and then 

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

but the last one has more advantage over the others as it more handy in future's features you going to have. 

<!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>

user_80398580
Related