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

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>

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

Share Improve this question asked Jan 16, 2019 at 5:46 md server 4681 gold badge5 silver badges16 bronze badges

you don't have any default for that. – nullqube Commented Jan 16, 2019 at 5:50
i had tried that too but still there is no any effect – md server Commented Jan 16, 2019 at 5:52
1 Just add .active {display:block} rule to the CSS, and add that class to the default tab element. Notice, that the rule has to placed after .tabcontent rule in the stylesheet. – Teemu Commented Jan 16, 2019 at 5:55
ohhh nice. its working now thanks – md server Commented Jan 16, 2019 at 6:27

Add a ment |

5 Answers 5

Sorted by: Reset to default 2

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>

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>

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>

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>

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - why html tab is not displaying its content when it set by active? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)