默認突出顯示的選項卡

Question

我的頁面上有以下選項卡。加載頁面時，我希望「入門」選項卡默認與其中的選項卡內容一起突出顯示。

有人可以幫忙嗎？

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

你的代碼幾乎是硬編碼的，將是非常難以維持。我已經重寫了一小段代碼。

HTML結構：只需要類，將active添加到默認突出顯示的元素，其餘部分將由腳本完成。

腳本：這將添加事件監聽器到li元素。點擊後，會找到tablinks並添加active類，同時從其他li元素的tablinks中刪除該類。

---

9月29日：更新的jsfiddle：https://jsfiddle.net/xptqLm86/15/

要獲得Firefox瀏覽器這項工作，你需要把querySelectorAll()內Array.prototype.slice.call()，這將NodeList對象轉換爲數組對象與forEach()循環工作。

(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>