單擊選項卡標題時顯示和隱藏div-有解無憂

我正在嘗試根據選擇的 Tab 顯示和隱藏 div。

例如，選項卡 1 應顯示第 1 部分。單擊選項卡 2 時，這應顯示第 2 部分并隱藏之前的選項卡 1。只要您單擊選項卡，相同的功能就應該起作用。它應該隱藏您所在的那個，然后顯示您單擊的那個。

目前，當單擊選項卡時，它會按預期顯示，但并未隱藏上一部分。

我相信問題出在我的職能上，displaySection但我在縮小導致問題的確切原因時遇到了問題。

我試圖為此搜索解決方案，但只能找到 jQuery 示例，我正在嘗試僅使用 Javascript 來解決此問題。

這是我的代碼片段：

function activeTab(evt, id) {
           
           // Get all elements with  and remove the class "active"
            let tabactive = document.getElementsByClassName("TabButtonSelected");
            tabactive[0].className = tabactive[0].className.replace(" TabButtonSelected", "");

            document.getElementById(id).style.display = "block";
            evt.currentTarget.className  = " TabButtonSelected";

            displaySection(evt,id)
        }
        
function displaySection(evt, id) {

            let tabactive = document.getElementsByClassName("tab-section");
            tabactive[0].className = tabactive[0].className.replace(" d-chart-show", "d-chart-n");

          
            document.getElementById("Section"   id).style.display = "block";
            evt.currentTarget.className  = " d-chart-show";

}

.container {
  width: 50%
}
.d-flex{
  display: flex;
   width: 100%;
}
.d-flex-col{
  display: flex;
  width: 100%;
  flex-direction: column;
}
.text-center {
  text-align: center;
}
.TabButton {
      width: 100%;
    color: #5A5A61;
    border: 0;
    border-bottom: 1px solid #e0e0e0;
    background-color: #FFFFFF;
    margin: 0;
    font-size: 14px;
    line-height: 16px;
    font-weight: normal;
    padding: 16px;
    cursor: pointer;
}
.TabButtonSelected {

    color: #7A1315 !important;
    border-bottom-color: #C94927 !important;
    font-weight: 500;
}
.d-chart-n {
  display: none;
}

.d-chart-show {
  display: block;
}

<div class="container">

<div class="d-flex">
      <div class="d-flex text-center"> 
        <div class="TabButton TabButtonSelected" id="Tab1" onclick="activeTab(event, 'Tab1')"> Tab 1</div>
        <div class="TabButton "id="Tab2" onclick="activeTab(event, 'Tab2')">Tab 2</div>
        <div class="TabButton " id="Tab3" onclick="activeTab(event, 'Tab3')">Tab 3</div>
        <div class="TabButton " id="Tab4" onclick="activeTab(event, 'Tab4')">Tab 4</div>
        </div>
</div>
<div class="d-flex-col">
  <div id="SectionTab1" class="tab-section d-chart-n d-chart-show" > Tab 1 Section</div>
  <br/>
   <br/>
  <div id="SectionTab2" class="tab-section d-chart-n"> Tab 2 Section</div>
   <br/>
    <br/>
  <div id="SectionTab3" class="tab-section d-chart-n"> Tab 3 Section</div>
   <br/> 
   <br/>
  <div id="SectionTab4" class="tab-section d-chart-n"> Tab 4 Section</div>
   <br/>
   <br/>
</div>

</div>

我想要的結果是當從選項卡上單擊時，它會將部分從選項卡開始。

uj5u.com熱心網友回復：

一種基于您當前代碼的簡單解決方案，[...document.querySelectorAll('div.tab-section')].forEach(item => item.style.display='none')在內部添加一行代碼 =displaySection以在顯示目標部分之前隱藏所有部分。

function activeTab(evt, id) {
           
           // Get all elements with  and remove the class "active"
            let tabactive = document.getElementsByClassName("TabButtonSelected");
            tabactive[0].className = tabactive[0].className.replace(" TabButtonSelected", "");

            document.getElementById(id).style.display = "block";
            evt.currentTarget.className  = " TabButtonSelected";

            displaySection(evt,id)
        }
        
function displaySection(evt, id) {

            let tabactive = document.getElementsByClassName("tab-section");
            tabactive[0].className = tabactive[0].className.replace(" d-chart-show", "d-chart-n");
            // add below line of codes
            [...document.querySelectorAll('div.tab-section')].forEach(item => item.style.display='none')
            document.getElementById("Section"   id).style.display = "block";
            evt.currentTarget.className  = " d-chart-show";

}

.container {
  width: 50%
}
.d-flex{
  display: flex;
   width: 100%;
}
.d-flex-col{
  display: flex;
  width: 100%;
  flex-direction: column;
}
.text-center {
  text-align: center;
}
.TabButton {
      width: 100%;
    color: #5A5A61;
    border: 0;
    border-bottom: 1px solid #e0e0e0;
    background-color: #FFFFFF;
    margin: 0;
    font-size: 14px;
    line-height: 16px;
    font-weight: normal;
    padding: 16px;
    cursor: pointer;
}
.TabButtonSelected {

    color: #7A1315 !important;
    border-bottom-color: #C94927 !important;
    font-weight: 500;
}
.d-chart-n {
  display: none;
}

.d-chart-show {
  display: block;
}

<div class="container">

<div class="d-flex">
      <div class="d-flex text-center"> 
        <div class="TabButton TabButtonSelected" id="Tab1" onclick="activeTab(event, 'Tab1')"> Tab 1</div>
        <div class="TabButton " id="Tab2" onclick="activeTab(event, 'Tab2')">Tab 2</div>
        <div class="TabButton " id="Tab3" onclick="activeTab(event, 'Tab3')">Tab 3</div>
        <div class="TabButton " id="Tab4" onclick="activeTab(event, 'Tab4')">Tab 4</div>
        </div>
</div>
<div class="d-flex-col">
  <div id="SectionTab1" class="tab-section d-chart-n d-chart-show" > Tab 1 Section</div>
  <br/>
   <br/>
  <div id="SectionTab2" class="tab-section d-chart-n"> Tab 2 Section</div>
   <br/>
    <br/>
  <div id="SectionTab3" class="tab-section d-chart-n"> Tab 3 Section</div>
   <br/> 
   <br/>
  <div id="SectionTab4" class="tab-section d-chart-n"> Tab 4 Section</div>
   <br/>
   <br/>
</div>

</div>

uj5u.com熱心網友回復：

恕我直言，最簡單的方法，也是 HTML 和 JS 最短的代碼......

const dContainer = document.querySelector('#TabsSystem')

dContainer
.querySelectorAll('.TabButton')
.forEach( tab => 
  tab.onclick =_=>
    {
    dContainer.dataset.tab = tab.dataset.tab
    }
  )

.container {
  width               : 50%
  }
.d-flex {
  display             : flex;
  width               : 100%;
  }
.d-flex-col {
  display             : flex;
  width               : 100%;
  flex-direction      : column;
  }
.text-center {
  text-align          : center;
  }
#TabsSystem .TabButton {
  width               : 100%;
  color               : #5A5A61;
  border              : 0;
  border-bottom       : 1px solid #e0e0e0;
  background-color    : #FFFFFF;
  margin              : 0;
  font-size           : 14px;
  line-height         : 16px;
  font-weight         : normal;
  padding             : 16px;
  cursor              : pointer;
  }
#TabsSystem[data-tab="Tab1"] .TabButton[data-tab="Tab1"],
#TabsSystem[data-tab="Tab2"] .TabButton[data-tab="Tab2"],
#TabsSystem[data-tab="Tab3"] .TabButton[data-tab="Tab3"],
#TabsSystem[data-tab="Tab4"] .TabButton[data-tab="Tab4"] {
  color               : #7A1315;
  border-bottom-color : #C94927;
  font-weight         : 500;
  }
#TabsSystem .tab-section {
  display : none;
  }
#TabsSystem[data-tab="Tab1"] .tab-section[data-tab="Tab1"],
#TabsSystem[data-tab="Tab2"] .tab-section[data-tab="Tab2"],
#TabsSystem[data-tab="Tab3"] .tab-section[data-tab="Tab3"],
#TabsSystem[data-tab="Tab4"] .tab-section[data-tab="Tab4"] {
  display : block;
  }

<div class="container" id="TabsSystem" data-tab="Tab1">
  <div class="d-flex">
    <div class="d-flex text-center">
      <div class="TabButton" data-tab="Tab1"> Tab 1</div>
      <div class="TabButton" data-tab="Tab2"> Tab 2</div>
      <div class="TabButton" data-tab="Tab3"> Tab 3</div>
      <div class="TabButton" data-tab="Tab4"> Tab 4</div>
    </div>
  </div>
  <div class="d-flex-col">
    <div class="tab-section" data-tab="Tab1"> Tab 1 Section</div>
    <div class="tab-section" data-tab="Tab2"> Tab 2 Section</div>
    <div class="tab-section" data-tab="Tab3"> Tab 3 Section</div>
    <div class="tab-section" data-tab="Tab4"> Tab 4 Section</div>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/323693.html

標籤：javascript html css

上一篇：在React中運行搜索后如何顯示“未找到記錄”

下一篇：拒絕應用來自'http://localhost:2000/cssFile/style.css'的樣式，因為它的MIME型別（'text/html'）