选项卡中的顺风选项卡无法按预期工作。

Question

使用，在选项卡中使用选项卡似乎不像预期的那样工作。出什么问题了？

​

const tabs = document.querySelectorAll(".tabs");
const tab = document.querySelectorAll(".tab");
const panel = document.querySelectorAll(".tab-content");

function onTabClick(event) {

  // deactivate existing active tabs and panel

  for (let i = 0; i < tab.length; i++) {
    tab[i].classList.remove("active");
  }

  for (let i = 0; i < panel.length; i++) {
    panel[i].classList.remove("active");
  }


  // activate new tabs and panel
  event.target.classList.add('active');
  let classString = event.target.getAttribute('data-target');
  console.log(classString);
  document.getElementById('panels').getElementsByClassName(classString)[0].classList.add("active");
}

for (let i = 0; i < tab.length; i++) {
  tab[i].addEventListener('click', onTabClick, false);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css" rel="stylesheet" />
<div class="bg-white">
  <nav class="tabs flex flex-col sm:flex-row">
    <button data-target="panel-1" class="tab active text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500">
        Summary Reports
    </button>
    <button data-target="panel-2" class="tab ext-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none">
        Trend Reports
    </button>
    <button data-target="panel-3" class="tab text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none">
        Predictive Reports
    </button>
  </nav>
</div>
<div id="panels">
  <div class="panel-1 tab-content active py-5">
    <div class="bg-white">
      <nav class="tabs flex flex-col sm:flex-row">
        <button data-target="panel-1" class="tab active text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500">
            Number of students submitted on a specific day
        </button>
        <button data-target="panel-2" class="tab ext-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none">
            Number of students that submitted for a specific module code
        </button>
      </nav>
    </div>
    <div id="panels">
      <div class="panel-1 tab-content active py-5">
        Number of students submitted on a specific day
      </div>
      <div class="panel-2 tab-content py-5">
        Number of students that submitted for a specific module code
      </div>
    </div>
  </div>
  <div class="panel-2 tab-content py-5">
    Trend Reports
  </div>
  <div class="panel-3 tab-content py-5">
    Predictive Reports
  </div>
</div>

​

CodePen视图

Answer 1

外部选项卡与内部选项卡有冲突。因为你对这两样都用了相同的身份证！我将内部内容id设置为内容面板。

将html更改为：

<div class="bg-white">
            <nav class="tabs flex flex-col sm:flex-row">
                <button data-target="panel-1" class="tab active text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500">
                    Summary Reports
                </button>
                <button data-target="panel-2" class="tab ext-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none">
                    Trend Reports
                </button>
                <button data-target="panel-3" class="tab text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none">
                    Predictive Reports
                </button>
            </nav>
        </div>

        <div id="panels">
            <div class="panel-1 tab-content active py-5">
                
                <div class="bg-white">
                    <nav class="tabs flex flex-col sm:flex-row">

                        <button data-target="panel-s-1" class="tab-s active text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500">
                            Number of students submitted on a specific day
                        </button>
                        <button data-target="panel-s-2" class="tab-s ext-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none">
                            Number of students that submitted for a specific module code
                        </button>

                    </nav>
                </div>

                <div id="content-panels">
                    <div class="panel-s-1 tab-content-s active py-5">
                        Number of students submitted on a specific day
                    </div>
                    <div class="panel-s-2 tab-content-s py-5">
                        Number of students that submitted for a specific module code
                    </div>
                </div>

            </div>

            <div class="panel-2 tab-content py-5">
                Trend Reports
            </div>
            <div class="panel-3 tab-content py-5">
                Predictive Reports
            </div>
        </div>

将脚本更改为：

const tabs = document.querySelectorAll(".tabs");
const tab = document.querySelectorAll(".tab");
const panel = document.querySelectorAll(".tab-content");

const tab_s = document.querySelectorAll(".tab-s");
const panel_s = document.querySelectorAll(".tab-content-s");

function onTabClick(event) {

  // deactivate existing active tabs and panel

  for (let i = 0; i < tab.length; i++) {
    tab[i].classList.remove("active");
  }

  for (let i = 0; i < panel.length; i++) {
    panel[i].classList.remove("active");
  }
  // activate new tabs and panel
  event.target.classList.add('active');
  let classString = event.target.getAttribute('data-target');
  console.log(classString);
  document.getElementById('panels').getElementsByClassName(classString)[0].classList.add("active");
}

function onTab_s_Click(event) {

  // deactivate existing active tabs and panel

  for (let i = 0; i < tab_s.length; i++) {
    tab_s[i].classList.remove("active");
  }

  for (let i = 0; i < panel_s.length; i++) {
    panel_s[i].classList.remove("active");
  }

  // activate new tabs and panel
  event.target.classList.add('active');
  let classString = event.target.getAttribute('data-target');
  console.log(classString);
  document.getElementById('content-panels').getElementsByClassName(classString)[0].classList.add("active");
}

for (let i = 0; i < tab.length; i++) {
  tab[i].addEventListener('click', onTabClick, false);
}
for (let i = 0; i < tab_s.length; i++) {
  tab_s[i].addEventListener('click', onTab_s_Click, false);
}

将css更改为：

.tab-content {
  display: none;
}

.tab-content-s {
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-content-s.active {
  display: block;
}