活动状态 - 选项卡中的选项卡.js

Question

我从其他来源借用 JavaScript 并尝试对其进行修改以满足我的需要。我希望父选项卡保持 'active' 并且子选项卡具有单独的 'active' 显示。这将有助于让用户知道他们在哪个主选项卡上。

我正在使用具有编码限制的供应商平台 - 这就是为什么我的一些代码可能被过度设计的原因。

感谢任何帮助:)

function openTab(evt, openTab, subTab) {
  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 < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  if (subTab) {
    var parent = evt.currentTarget.closest('.tabcontent');
    parent.style.display = "block";
    parent.className += " active";
  }
  document.getElementById(openTab).style.display = "block";
  evt.currentTarget.className += " active";

}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

.tab {
  overflow: hidden;
  background-color: #f1f1f1;
}

.tab2 {
  overflow: hidden;
}

.tab button,
.tab2 button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 25px;
}

.tab2 button {
  font-size: 18px !important;
  background-color: #ED780F;
  color: #fff;
  border-radius: 4px;
  margin: 3px;
}

.tab button:hover,
.tab2 button:hover {
  background-color: #ddd;
  color: #000;
}

.tab button.active,
.tab2 button.active {
  background-color: #0f3d70 !important;
  color: #fff;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
}

<div class="tab">
  <button type="button" class="tablinks" onclick="openTab(event, 'Assessments')">Assessments</button>
  <button type="button" class="tablinks" onclick="openTab(event, 'Workshops')">Workshops</button>
  <button type="button" class="tablinks" onclick="openTab(event, 'Critical')">Critical Skills</button>
  <button type="button" class="tablinks" onclick="openTab(event, 'Tools')">Tools</button>
</div>

<!--1st Tab-->
<div id="Assessments" class="tabcontent">
  <h1>Assessments</h1>
  <h2>Use your results to identify appropriate training on the Tech Development page or other resources within Navy Federal University.</h2>
  <ul class="w3-ul w3-medium half w3-margin-bottom">
    <li>Identify priority skills for your role with your leader.</li>
    <li>Select 2 – 3 assessments to establish your baseline.
    </li>
    <li>Use results to identify appropriate training within the Tech Development School or other resources within The University.
    </li>
    <li>Retake original assessment to evaluate learning progress.
    </li>
  </ul>

  <!--Assessment SubTab-->
  <div class="tab2">
    <button type="button" class="tablinks small" onclick="openTab(event, 'data',true)">Data Analytics Skills Survey</button>
    <button type="button" class="tablinks small" onclick="openTab(event, 'DataCamp', true)">DataCamp</button>
    <button type="button" class="tablinks small" onclick="openTab(event, 'LinkedIn', true)">LinkedIn</button>
  </div>

  <!--Data Skills Survey SubTab-->
  <div id="data" class="tabcontent">
    <div class="row">
      <h2 class="half">Interested in future data and analytics development opportunities?
        <br>
        <br>
        <a class="ulink" href="6" target="_blank">Click here</a> to learn about the Data and Analytics Skills Survey, review FAQs and access a link to complete the survey
      </h2>

      <img class="sammie" src="" alt="sammie">
    </div>
  </div>


  <!--DataCamp SubTab-->
  <div id="DataCamp" class="tabcontent">
    <div class="row">
      <div class="half">
        <i class="brand fad fa-campground"></i>
        <h2>Discover your analytical skill level and receive personalized learning recommendations with DataCamp’s assessments.</h2>
        <a class="ubutton" href="s" target="_blank">View Available Asssesments</a>
      </div>

      <ul class="list half">
        <h2><b>Examples include:</b></h2>
        <li>R</li>
        <li>SQL</li>
        <li>Python</li>
        <li>Data &amp; Analytics</li>
      </ul>

    </div>

  </div>


  <!--LinkedIn SubTab-->
  <div id="LinkedIn" class="tabcontent">
    <div class="row">
      <div class="half">
        <i class="brand fab fa-linkedin-in"></i>
        <h2>LinkedIn allows learners to take assessments on business and technical skills to test and showcase their proficiency in those skills. LinkedIn Learning will recommend courses for you and skill badges are available to display on your profile.
          <br>
          <br>
          <i>Must be logged into LinkedIn. <a class="ulink" href="" target="_blank">Click here</a> for instructions for activating your account.</i>
        </h2>

        <a class="ubutton" href="" target="_blank">View Available Asssesments</a>
      </div>
      <ul class="list half">
        <h2><b>Examples include:</b></h2>
        <li>Agile Methodologies</li>
        <li>C</li>
        <li>C#</li>
        <li>C++</li>
        <li>CSS</li>
        <li>Hadoop</li>
        <li>Java</li>
        <li>JavaScript</li>
        <li>Machine Learning</li>
        <li>Microsoft Azure</li>
        <li>Microsoft Excel</li>
        <li>Microsoft Power BI</li>
        <li>Microsoft SharePoint</li>
        <li>MongoDB</li>
        <li>Python</li>
        <li>R Programming</li>
      </ul>
    </div>
  </div>
</div>

Answer 1

根据您的实际代码，实现所需内容的一种简单方法是独立处理选项卡和子选项卡按钮上的 active class。首先为子标签按钮分配一个专用的 class，比方说 subtablinks:

<button type="button"
    class="subtablinks small"
    onclick="openTab(event, 'data',true)">
        Data Analytics Skills Survey
</button>

然后在您的 openTab() 函数中，您可以根据 subTab 标志从选项卡或子选项卡中删除 class：

function openTab(evt, openTab, subTab) {
  var i, tabcontent, tablinks, subtablinks; // Added var for subtablinks
  tabcontent = document.getElementsByClassName('tabcontent');
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = 'none';
  }

  if (subTab) {
    // Removing active class from subtablinks
    subtablinks = document.querySelectorAll('.subtablinks');
    subtablinks.forEach((el) => el.classList.remove('active'));

    var parent = evt.currentTarget.closest('.tabcontent');
    parent.style.display = 'block';
    parent.className += ' active';
  } else {
    // Removing active class from tablinks
    tablinks = document.querySelectorAll('.tablinks');
    tablinks.forEach((el) => el.classList.remove('active'));
  }
  document.getElementById(openTab).style.display = 'block';
  evt.currentTarget.className += ' active';
}

Answer 2

不是微不足道的，但这行得通

使用 addEventListener
从包装器委托（我添加了一个 div）
使用最近的
切换隐藏

document.getElementById("container").addEventListener("click", function(e) {
  const tgt = e.target.closest("button");
  if (tgt) {
    const id = tgt.dataset.id;
    const subTab = tgt.classList.contains("small");
    document.querySelectorAll(".tabcontent").forEach(tc => {
      const hide = id != tc.id && !(subTab && tc === tgt.closest(".tabcontent"))
      tc.hidden = hide
    });
    document.querySelectorAll(".tablinks").forEach(tl => tl.classList.toggle("active", tgt === tl));
    if (subTab) document.querySelector(`[data-id=${tgt.closest(".tabcontent").id}]`).classList.add("active")
    else document.getElementById(id)?.querySelector(".tablinks").click()
  }
})
document.querySelector(".tablinks").click()

.tab {
  overflow: hidden;
  background-color: #f1f1f1;
}

.tab2 {
  overflow: hidden;
}

.tab button,
.tab2 button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 25px;
}

.tab2 button {
  font-size: 18px !important;
  background-color: #ED780F;
  color: #fff;
  border-radius: 4px;
  margin: 3px;
}

.tab button:hover,
.tab2 button:hover {
  background-color: #ddd;
  color: #000;
}

.tab button.active,
.tab2 button.active {
  background-color: #0f3d70 !important;
  color: #fff;
}

.tabcontent {
  padding: 6px 12px;
  border-top: none;
}

<div id="container">
  <div class="tab">
    <button type="button" class="tablinks" data-id="Assessments">Assessments</button>
    <button type="button" class="tablinks" data-id="Workshops">Workshops</button>
    <button type="button" class="tablinks" data-id="Critical">Critical Skills</button>
    <button type="button" class="tablinks" data-id="Tools">Tools</button>
  </div>

  <!--1st Tab-->
  <div id="Assessments" class="tabcontent">
    <h1>Assessments</h1>
    <h2>Use your results to identify appropriate training on the Tech Development page or other resources within Navy Federal University.</h2>
    <ul class="w3-ul w3-medium half w3-margin-bottom">
      <li>Identify priority skills for your role with your leader.</li>
      <li>Select 2 – 3 assessments to establish your baseline.
      </li>
      <li>Use results to identify appropriate training within the Tech Development School or other resources within The University.
      </li>
      <li>Retake original assessment to evaluate learning progress.
      </li>
    </ul>

    <!--Assessment SubTab-->
    <div class="tab tab2">
      <button type="button" class="tablinks small" data-id="data">Data Analytics Skills Survey</button>
      <button type="button" class="tablinks small" data-id="DataCamp">DataCamp</button>
      <button type="button" class="tablinks small" data-id="LinkedIn">LinkedIn</button>
    </div>

    <!--Data Skills Survey SubTab-->
    <div id="data" class="tabcontent">
      <div class="row">
        <h2 class="half">Interested in future data and analytics development opportunities?
          <br>
          <br>
          <a class="ulink" href="6" target="_blank">Click here</a> to learn about the Data and Analytics Skills Survey, review FAQs and access a link to complete the survey
        </h2>

        <img class="sammie" src="" alt="sammie">
      </div>
    </div>


    <!--DataCamp SubTab-->
    <div id="DataCamp" class="tabcontent">
      <div class="row">
        <div class="half">
          <i class="brand fad fa-campground"></i>
          <h2>Discover your analytical skill level and receive personalized learning recommendations with DataCamp’s assessments.</h2>
          <a class="ubutton" href="s" target="_blank">View Available Asssesments</a>
        </div>

        <ul class="list half">
          <h2><b>Examples include:</b></h2>
          <li>R</li>
          <li>SQL</li>
          <li>Python</li>
          <li>Data &amp; Analytics</li>
        </ul>

      </div>

    </div>


    <!--LinkedIn SubTab-->
    <div id="LinkedIn" class="tabcontent">
      <div class="row">
        <div class="half">
          <i class="brand fab fa-linkedin-in"></i>
          <h2>LinkedIn allows learners to take assessments on business and technical skills to test and showcase their proficiency in those skills. LinkedIn Learning will recommend courses for you and skill badges are available to display on your profile.
            <br>
            <br>
            <i>Must be logged into LinkedIn. <a class="ulink" href="" target="_blank">Click here</a> for instructions for activating your account.</i>
          </h2>

          <a class="ubutton" href="" target="_blank">View Available Asssesments</a>
        </div>
        <ul class="list half">
          <h2><b>Examples include:</b></h2>
          <li>Agile Methodologies</li>
          <li>C</li>
          <li>C#</li>
          <li>C++</li>
          <li>CSS</li>
          <li>Hadoop</li>
          <li>Java</li>
          <li>JavaScript</li>
          <li>Machine Learning</li>
          <li>Microsoft Azure</li>
          <li>Microsoft Excel</li>
          <li>Microsoft Power BI</li>
          <li>Microsoft SharePoint</li>
          <li>MongoDB</li>
          <li>Python</li>
          <li>R Programming</li>
        </ul>
      </div>
    </div>
  </div>
</div>

活动状态 - 选项卡中的选项卡.js

Active Status - tabs within tabs .js

html

javascript

tabs