Question

我的页面上有以下标签。当页面加载时，我希望默认情况下突出显示“入门”选项卡及其中的选项卡内容。

有人可以帮忙吗？

 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类，同时从其他tablinks元素的li中删除该类。

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

要在Firefox浏览器上运行此工作，您需要将querySelectorAll()放在Array.prototype.slice.call()内，这会将NodeList对象转换为数组对象以使用forEach()循环。

＆＃13;

(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");
    });
  });
})();

＆＃13;

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;
}

＆＃13;

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

＆＃13;

默认突出显示的选项卡

1 个答案: