选项卡中的顺风选项卡未按预期工作

Posted

技术标签:

【中文标题】选项卡中的顺风选项卡未按预期工作【英文标题】：Tailwind tabs within tab not working as expected 【发布时间】：2021-09-23 21:54:44 【问题描述】：

使用 html 和 TailwindCss 在选项卡中使用选项卡似乎无法正常工作。怎么了？

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>

View on CodePen

【问题讨论】：

在 HTML 中，IDs must be unique to the DOM tree;即，id="panels" 只能有一个元素。 是的，我知道，但我想我错过了在我使用的代码中设置 id 的部分。 【参考方案1】：

外标签与内标签有冲突。因为你对两者都使用了相同的 id！我将内部内容 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;

【讨论】：

非常感谢，但它仍然不能 100% 工作，因为单击“趋势报告”选项卡不会按预期显示趋势报告描述，请参阅更新后的 codepen.io 链接 @987654321 @. 非常好，非常感谢它现在 100% 工作。感谢您的努力。

以上是关于选项卡中的顺风选项卡未按预期工作的主要内容，如果未能解决你的问题，请参考以下文章

引导导航选项卡未加载正确的页面

参考从中复制数据的选项卡，将不同选项卡中的数据整理到单个选项卡

带有分页的可扩展嵌套 Angular 材料数据表未按预期工作？

引导选项卡中的数据表大小不正确

选项卡未添加到 QTabWidget

使用 2 个不同选项卡中的按钮以不同名称保存同一工作簿