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

时间:2018-09-12 21:39:20

标签: javascript jquery css

现在,我的标签结构如下所示: tabs-no-wrap

如您所见,当选项卡到达行尾时,它们将换行到下一行。我知道如何隐藏其他标签;但是,我想引入一个箭头系统,以在选项卡溢出时导航到其他选项卡。取决于屏幕分辨率,如下所示: tabs

仅当隐藏了其他选项卡时,我才想显示箭头,这引出我的问题:如何检测选项卡何时包裹并插入箭头?

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

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

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

1 个答案:

答案 0 :(得分: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>