admin管理员组

文章数量:1357121

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>

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.

  • javascript
  • html
  • css
Share Improve this question asked Jan 16, 2019 at 5:46 md servermd server 4681 gold badge5 silver badges16 bronze badges 4
  • 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

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>

本文标签： javascriptwhy html tab is not displaying its content when it set by activeStack Overflow

版权声明：本文标题：javascript - why html tab is not displaying its content when it set by active? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743999719a2573634.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。