Javascript 显示/隐藏选项卡箭头以在溢出时导航其他选项卡

现在，我有一个选项卡结构，如下所示：

正如您所看到的，当制表符到达行的末尾时，它们将换行到下一行。我知道如何隐藏额外的标签；但是，我想引入一个箭头系统，以便在选项卡溢出时导航到其他选项卡。根据屏幕分辨率，如下所示：

我只想在有其他选项卡被隐藏时显示箭头，这就引出了我的问题：如何检测选项卡何时包装并插入箭头

我需要这与响应的布局工作

以下是我用来创建选项卡的代码注意：它包括箭头的硬编码列表项：

<ul id="tabs" class="tab-links">
    <li class=""><a href="#tables">Tables &amp; Views</a></li>
    <li class=""><a href="#erd-tab" onclick="getERD()">ERD</a></li>
    <li class=""><a href="#left" class="gray-bg query-tab"><i class="fa fa-caret-left"></i></a></li>
    <li class="active"><a class="query-tab" href="#query1">Query 1</a></li>
    <li class=""><a href="#query2" class="query-tab">Query 2</a></li>
    <li class=""><a href="#query3" class="query-tab">Query 3</a></li>
    <li class=""><a href="#query4" class="query-tab">Query 4</a></li>
    <li class=""><a href="#query5" class="query-tab">Query 5</a></li>
    <li class=""><a href="#query6" class="query-tab">Query 6</a></li>
    <li class=""><a href="#query7" class="query-tab">Query 7</a></li>
    <li class=""><a href="#query8" class="query-tab">Query 8</a></li>
    <li class=""><a href="#query9" class="query-tab">Query 9</a></li>
    <li class=""><a href="#right" class="gray-bg query-tab"><i class="fa fa-caret-right"></i></a></li>
    <!-- Hidden Tabs -->
    <li class=""><a href="#query10" class="query-tab">Query 10</a></li>
    <li class=""><a href="#query11" class="query-tab">Query 11</a></li>
    <li class=""><a href="#query12" class="query-tab">Query 12</a></li>
</ul>

答复要求：

addEventListener'load'，initTabs； 函数初始化选项卡{ var listContainer=document.getElementById'tabs'； var buttonWidthCounter=0； var totalContainerWidth=listContainer.offsetWidth； 对于变量i=0；itotalContainerWidth{ //按钮溢出…添加选项卡按钮 日志“有溢出…添加选项卡箭头按钮…”； } buttonWidthCounter+=listContainer.children[i].offsetWidth； } } 李{ 显示：内联块； }

---

您可以考虑使用水平滚动代替箭头按钮。对于移动设备，我认为很难按下这么小的箭头按钮。如果坚持使用箭头，可以使用包含元素的.offsetWidth来测量所有按钮的宽度。这仅在容器为display:table时有效；或宽度设置为精确封装子元素。另一个选项是循环所有子项并添加所有按钮的.offsetWidth。从那里，可以计算出适合哪些按钮的细节。谢谢你的回答。我将尝试一下，看看它是如何工作的！我应该补充一点，尽管滚动条可以工作，但它们会损害站点的外观，因为选项卡与包含内容的div齐平。滚动条会妨碍您的工作。@Dustin在使用隐藏选项卡时，您还必须计算要隐藏的选项卡数量，并考虑可能的浏览器窗口大小调整。例如，有人调整了浏览器窗口的大小。是的。我正在做这件事。这很有效。非常感谢你！