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

Question

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

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

我只想在隐藏了其他选项卡时显示箭头，这引出了我的问题:如何检测选项卡何时换行并插入箭头？

我需要它来处理响应式布局。

这是我用来创建选项卡的代码(注意:它包括箭头的硬编码列表项):

<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>

Answer 1

请求的答案:

window.addEventListener('load', initTabs);

function initTabs() {
  var listContainer = document.getElementById('tabs');
  var buttonWidthCounter = 0;
  var totalContainerWidth = listContainer.offsetWidth;
  for (var i = 0; i < listContainer.children.length; i++) {
    if (buttonWidthCounter + listContainer.children[i].offsetWidth > totalContainerWidth) {
      //button overflow...add tab buttons
      console.log('there is overflow...add tab arrow buttons...');
    }
    buttonWidthCounter += listContainer.children[i].offsetWidth;

  }
}

li {
  display: inline-block;
}

<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>

我建议的答案:

滚动条更容易实现，而且可以说更好。

li{
display:inline-block;
}

ul{
white-space:nowrap;
}

html,body{
margin:0;
padding:0;
}

#container{
width:100vw;
overflow:scroll;
}

<div id="container">
<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>
</div>