Jeosiyy Chu Jeosiyy Chu - 1 year ago 115
HTML Question

How to always show the first TAB

I want to show the first tab always whenever the page load, which is the "Details" tab, any idea to do it? I have tried added JavaScript which runs on pageload, but it didn't work out as I wish.


<ul class="tab">
<li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Details')">Details</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Reviews')">Reviews</a></li>

<div id="Details" class="tabcontent">
<p>London is the capital city of England.</p>

<div id="Reviews" class="tabcontent">
<p>Paris is the capital of France.</p>


function getFirstChildWithTagName(evt, tagName) {
for (var i = 0; i < element.childNodes.length; i++) {
if (element.childNodes[i].nodeName == tagName) return element.childNodes[i];

function openTab(evt, tabName) {
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 < tabcontent.length; i++) {
document.getElementById(tabName).style.display = "block";

$(document).ready(function () {

Tried the following code, but it didn't work:

function LoadFunction() {
var mybtn = document.getElementsByClassName("tablinks")[0];;
window.onload = LoadFunction();

Answer Source

One approach is to add style elements that mimic button click in the initial HTML.

Add active class to tablink button

<li><a href="javascript:void(0)" class="tablinks active" onclick="openTab(event, 'Details')">Details</a></li>

Add display style to tab content

<div id="Details" class="tabcontent" style="display:block">

Hope that helps

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download