Tab Highlighted by Default

Question

I have the following tabs on my page. When the page loads I want the Getting Started tab to be highlighted by default along with the tab content within it.

Can somebody help?

JS Fiddle

 function openTab(evt, tabName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the link that opened the tab
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

Answer 1

Your code is almost hard-coded and will be very difficult to maintain. I have rewritten a shorter snippet.

HTML structure: Only need classes, add active to the element you want to highlight by default, the rest will be done by scripts.

Scripts: This will add event listeners to li elements. When clicked, it will find tablinks and add active class, at the same time remove that class from tablinks of other li elements.

---

Sep 29th: Updated JSFiddle: https://jsfiddle.net/xptqLm86/15/

To get this work on Firefox browsers, you need to put querySelectorAll() inside Array.prototype.slice.call() , this will convert NodeList object to an array object to work with forEach() loops.

 (function() { var items = Array.prototype.slice.call(document.querySelectorAll(".tab li")); items.forEach(function(item) { item.addEventListener("click", function() { // Toggle links highlight var siblingLinks = Array.prototype.slice.call(this.parentNode.querySelectorAll("li")); siblingLinks.forEach(function(sibling) { sibling.querySelector(".tablinks").classList.remove("active"); }); this.querySelector(".tablinks").classList.add("active"); // Toggle tabs appearance var tabs = Array.prototype.slice.call(document.querySelectorAll(".tabcontent")); var tabId = this.querySelector(".tablinks").getAttribute("data-tab"); tabs.forEach(function(tab) { tab.classList.remove("show"); }); document.getElementById(tabId).classList.add("show"); }); }); })(); 

 ul.tab { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Float the list items side by side */ ul.tab li {float: left;} /* Style the links inside the list items */ ul.tab li a { display: inline-block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } /* Change background color of links on hover */ ul.tab li a:hover {background-color: #ddd;} /* Create an active/current tablink class */ ul.tab li a:focus, .active {background-color: #ccc;} /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } .tabcontent.show { display: block; } 

 <ul class="tab"> <li><a href="#" class="tablinks active" data-tab="tab1">'Getting Started'</a></li> <li><a href="#" class="tablinks" data-tab="tab2">'Actuarial Analyst Training'</a></li> <li><a href="#" class="tablinks" data-tab="tab3">'Business Analyst Training'</a></li> <li><a href="#" class="tablinks" data-tab="tab4">'Business Configurator Training'</a></li> <li><a href="#" class="tablinks" data-tab="tab5">'Continuous Learning Sessions'</a></li> <li><a href="#" class="tablinks" data-tab="tab6">'Solution Architect Training'</a></li> </ul> <div id="tab1" class="tabcontent show"> <h3>'Getting Started'</h3> <ul style="list-style: none;"> <li><a href="/@api/deki/files/2682/ALIP_Overview_Presentation.pptx?origin=mt-web">'ALIP Overview'</a></li> <li><a href="/Training/ASW_VPN_Setup">'ASW VPN Setup'</a></li> <li><a href="/Training/Workflow_and_Java_Version_8">'Workflow and Java Version 8'</a></li> <li><a href="/Training/Squirrel_Database_Tool_-_Installation_and_Documentation">'ALIP TS Squirrel Documentation'</a></li> <li><a href="/03_Training/Eclipse_Workbench_Installation_Guide">'Eclipse Workbench Installation Guide'</a></li> </ul> </div> <div id="tab2" class="tabcontent"> <h3>'Actuarial Analyst Training'</h3> <ul style="list-style: none;"> <li><a href="/03_Training/ALIP_Product_Documentation_and_Training_Outline">'ALIP Product Documentation and Training Outline'</a></li> <li><a href="/03_Training/Onshore_Training_Approach_-_Actuaries">'Onshore Training Approach - Actuaries'</a></li> <li><a href="/03_Training/Self-Guided_Product_Training_Agenda">'Self Guided Product Training Agenda'</a></li> </ul> </div> <div id="tab3" class="tabcontent"> <h3>'Business Analyst Training'</h3> <ul style="list-style: none;"> <li><a href="/03_Training/Overview">'Overview'</a></li> <li><a href="/03_Training/Exercises">'Exercises'</a></li> <li><a href="/03_Training/Policy_Administration">'Policy Administration'</a></li> <li><a href="/@api/deki/files/2729/Defect_Management_using_RTC.pptx?origin=mt-web">'Defect Management'</a></li> <li><a href="/03_Training/Database_Training/">'Database Training'</a></li> <li><a href="/03_Training/Functional_Specification">'Functional Specification'</a></li> <li><a href="/Training/New_Business_and_Underwriting">'New Business and Underwriting'</a></li> <li><a href="/03_Training/Business_Configuration_Training">'Business Configuration Training'</a></li> <li><a href="/03_Training/Product_Configuration_Training">'Product Configuration Training'</a></li> <li><a href="/03_Training/ALIP_Functional_Training_Outline">'ALIP Functional Training Outline'</a></li> <li><a href="/03_Training/Onshore_Training_Approach_-_Business">'Onshore Training Approach - Business'</a></li> </ul> </div> <div id="tab4" class="tabcontent"> <h3>'Business Configurator Training'</h3> <ul style="list-style: none;"> <li><a href="/@api/deki/files/3170/BC_Exercise.zip?origin=mt-web">'BC Exercise'</a></li> <li><a href="/03_Training/ALIP_Configuration_Tips">'Configuration Tips'</a></li> <li><a href="/@api/deki/files/3161/Understanding_ALIP_Business_Config_-_Introduction.pptx?origin=mt-web">'Business Config - Introduction'</a></li> <li><a href="/@api/deki/files/3159/Understanding_ALIP_Business_Config_-_Common_Admin.pptx?origin=mt-web">'Business Config - Common Admin'</a></li> <li><a href="/@api/deki/files/3160/Understanding_ALIP_Business_Config_-_Forms.pptx?origin=mt-web">'Business Config - Forms'</a></li> <li><a href="/@api/deki/files/3162/Understanding_ALIP_Business_Config_-_Lookup.pptx?origin=mt-web">'Business Config - Lookup'</a></li> <li><a href="/@api/deki/files/3165/Understanding_ALIP_Business_Config_-_Rules.pptx?origin=mt-web">'Business Config - Rules'</a></li> <li><a href="/@api/deki/files/3169/Understanding_ALIP_Business_Config_-_Workflow.pptx?origin=mt-web">'Business Config - Workflow'</a></li> <li><a href="/@api/deki/files/3163/Understanding_ALIP_Business_Config_-_Page_Group_Views.pptx?origin=mt-web">'Business Config - Page Group Views'</a></li> <li><a href="/@api/deki/files/3164/Understanding_ALIP_Business_Config_-_Page_Groups.pptx?origin=mt-web">'Business Config - Page Groups'</a></li> <li><a href="/@api/deki/files/3166/Understanding_ALIP_Business_Config_-_Schema_Mgmt.pptx?origin=mt-web">'Business Config - Schema Mgmt'</a></li> <li><a href="/@api/deki/files/3167/Understanding_ALIP_Business_Config_-_Skills_Check.pptx?origin=mt-web">'Business Config - Skills Check'</a></li> <li><a href="/@api/deki/files/3168/Understanding_ALIP_Business_Config_-_Tabbed_Workflow.pptx?origin=mt-web">'Business Config - Tabbed Workflow'</a></li> <li><a href="/@api/deki/files/3158/ALIP_Business_Configuration_Training_2008.ppt?origin=mt-web">'Business Configuration Training 2008'</a></li> <li><a href="/03_Training/ALIP_Functional_and_Business_Configuration_Training_Outline">'Functional and Business Configuration Training Outline'</a></li> <li><a href="/03_Training/Onshore_Training_Approach_-_Business">'Onshore Training Approach - Business Configurator'</a></li> </ul> </div> <div id="tab5" class="tabcontent"> <h3>'Continuous Learning Sessions'</h3> <ul style="list-style: none;"> <li><a href="/03_Training/ALIP_Release_5.1.4_-_20151222">'ALIP Release 5.1.4'</a></li> <li><a href="/03_Training/ALIP_Release_5.1.5_%E2%80%93_20160218">'ALIP Release 5.1.5'</a></li> <li><a href="/03_Training/ALIP_Release_5.1.6_%E2%80%93_20160422">'ALIP Release 5.1.6'</a></li> <li><a href="/03_Training/ALIP_Release_5.1.7_%E2%80%93_20160609">'ALIP Release 5.1.7'</a></li> <li><a href="/03_Training/ALIP_Release_5.1.8_%E2%80%93_20160811">'ALIP Release 5.1.8'</a></li> <li><a href="/03_Training/ALIP_Release_5.1.x_-_20151022">'ALIP Release 5.1.x'</a></li> <li><a href="/03_Training/ALIP_in_the_Cloud_%E2%80%93_201601289">'ALIP in the Cloud'</a></li> <li><a href="/03_Training/ALIP_Staging_Tables_%E2%80%93_20160317">'ALIP Staging Tables'</a></li> <li><a href="/03_Training/Base_Merge_Process">'Base Merge Process'</a></li> <li><a href="/GL_Accounting_%E2%80%93_20151119">'GL Accounting'</a></li> <li><a href="/03_Training/EI_and_Fund_Setup_%E2%80%93_20160630">'EI and Fund Setup'</a></li> <li><a href="/03_Training/ALIP_Sales_Demo_%E2%80%93_20160226">'ALIP Sales Demo'</a></li> <li><a href="/Continuous_Learning/ALIP_Customer_Portal_Demo_%E2%80%93_20160505">'ALIP Customer Portal Demo'</a></li> <li><a href="/03_Training/Business_Config_Overview_%E2%80%93_20160407">'Business Config Overview'</a></li> <li><a href="/03_Training/Business_Config_Session_II_%E2%80%93_20160714">'Business Config Session II'</a></li> <li><a href="/03_Training/Integration_Workbench_%E2%80%93_20151210">'Integration Workbench'</a></li> <li><a href="/03_Training/Tech_Arch_Improvements_on_Analytics_%E2%80%93_20160519">'Tech Arch Improvements on Analytics'</a></li> <li><a href="/03_Training/Functional_Lab_New_Business-Underwriting_Demo_-_20160728">'Functional Lab New Business-Underwriting Demo'</a></li> </ul> </div> <div id="tab6" class="tabcontent"> <h3>'Solution Architect Training'</h3> <ul style="list-style:none;"> <li><a href="/03_Training/Solution_Architect_Training_Guide">'Solution Architect Training Guide'</a></li> </ul> </div>