code show as below
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> body {font-family: "Lato", sans-serif;} /* Style the tab */ div.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons inside the tab */ div.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 */ div.tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ div.tab button.active { background-color: #ccc; } /* Style the tab content */ /*.tabcontent {*/ /*display: none;*/ /*padding: 6px 12px;*/ /*border: 1px solid #ccc;*/ /*border-top: none;*/ /*}*/ /* 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 > < body > < the p- > Click on each tab to view content: </ the p- > <div class="tab"> <button id="defaultOpen" class="tablinks" onclick="openCity(event, 'London')">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> </body> </html> <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; // remove block the effect of all tab-content, tab-links first remove active. 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", ""); } // character string corresponding to the tab-content and tab-links plus effect. document.getElementById (cityName) .style.display = " Block " ; evt.currentTarget.className += " active"; // tabcontent[i].style.display = "none"; } // trigger id = "defaultOpen" click event of a default so that I tabcontent display. document.getElementById ( " defaultOpen " ) .click (); // var tabContent = document.getElementsByClassName ( "tabContent"); // tabContent [0] = .style.display "Block"; // // var tablinks = document.getElementsByClassName("tablinks"); // tablinks[0].className += " active"; </script>
II. Pop fade effect
If you want to fade in the pop-up animation. Put above tabcontent plus animation style property. And add animation effects fadeEffect definition.
/* 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;}
}