代码之家 › 专栏 › 技术社区 › Dustin

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

css jquery javascript

Dustin · 技术社区 · 7 年前

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

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

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

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

<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 回复 | 直到 7 年前

www139 7 年前

答复要求:

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>