如何为动态生成的选项卡提供左右滚动按钮

Question

我根据我的要求生成了标签但是当标签变得越来越多时它们会进入下一行。它们看起来很奇怪我想要使用左右滚动选项。下一个和以前的功能应该有效。但我不知道如何包含这个功能，因为我是脚本的新手，任何人都可以帮助我。我已生成标签，如果标签生成更多，他们将在下一行。在这个功能中，所有都是静态选项卡，当它们变得更多时，如何使它们正常运行。

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
    return false;
}

body {font-family: Arial;}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
 
  <button class="tablinks"onclick="return openCity(event,'London')">Jan 2017</button>
  <button class="tablinks" onclick="return openCity(event, 'Paris')">Feb 2017</button>
  <button class="tablinks" onclick="return openCity(event, 'Tokyo')">Mar 2017</button>
  <button class="tablinks"onclick="return openCity(event,'London')">April 2017</button>
  <button class="tablinks"onclick="return openCity(event,'London')">May 2017</button>
  <button class="tablinks"onclick="return openCity(event,'London')">June 2017</button>
  <button class="tablinks" onclick="return openCity(event, 'Paris')">July 2017</button>
  <button class="tablinks" onclick="return openCity(event, 'Tokyo')">August 2017</button>
  <button class="tablinks"onclick="return openCity(event,'London')">September 2017</button>
  <button class="tablinks"onclick="openCity(event,'London')">October 2017</button>
  <button class="tablinks"onclick="openCity(event,'London')">Novenber 2017</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">December 2017</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Jan 2018</button>
  <button class="tablinks"onclick="openCity(event,'London')">Feb 2018</button>
</div>

<div id="London" class="tabcontent">
  <h3>Januaray</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Febrary</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>March</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

Answer 1

如果你只是用css来解决这个问题怎么办。

将white-space: nowrap;和overflow-x: scroll;添加到.tab：

然后从float: left;移除.tab button，然后添加display: inline-block;

这将使您的.tab元素滚动并阻止您的按钮换行到下一行。

/* Style the tab */
.tab {
    /* overflow: hidden; */
    overflow-x: scroll;
    white-space: nowrap;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    /* float: left; */
    display: inline-block;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

这将是结果：

＆＃13;

＆＃13;

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
    return false;
}

＆＃13;

body {font-family: Arial;}

/* Style the tab */
.tab {
    overflow-x: scroll;
    white-space: nowrap;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    display: inline-block;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

＆＃13;

<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
 
  <button class="tablinks"onclick="return openCity(event,'London')">Jan 2017</button>
  <button class="tablinks" onclick="return openCity(event, 'Paris')">Feb 2017</button>
  <button class="tablinks" onclick="return openCity(event, 'Tokyo')">Mar 2017</button>
  <button class="tablinks"onclick="return openCity(event,'London')">April 2017</button>
  <button class="tablinks"onclick="return openCity(event,'London')">May 2017</button>
  <button class="tablinks"onclick="return openCity(event,'London')">June 2017</button>
  <button class="tablinks" onclick="return openCity(event, 'Paris')">July 2017</button>
  <button class="tablinks" onclick="return openCity(event, 'Tokyo')">August 2017</button>
  <button class="tablinks"onclick="return openCity(event,'London')">September 2017</button>
  <button class="tablinks"onclick="openCity(event,'London')">October 2017</button>
  <button class="tablinks"onclick="openCity(event,'London')">Novenber 2017</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">December 2017</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Jan 2018</button>
  <button class="tablinks"onclick="openCity(event,'London')">Feb 2018</button>
</div>

<div id="London" class="tabcontent">
  <h3>Januaray</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Febrary</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>March</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将JoelStüdle的答案与一些JS相结合应该可以解决问题：

1. 将white-space: nowrap;和overflow-x: hidden;添加到 .tab 并向边缘添加一些边距（用于控件）
2. 从 .tab按钮中删除float: left;并添加display: inline-block;
3. 在 .tab 周围添加一个包装，以便在一个空格中维护所有导航元素（称为 .tab-navigation ），从移动background-color .tab 以使所有控件具有相同的背景颜色
4. 在包装器内，添加两个浮动的导航控件 .arrow-left 和 .arrow-right ，用于调用新函数moveNavigation(byX)
5. 添加新功能moveNavigation(byX)以进行滚动

我还创建了一个Fiddle，以便你可以玩它。

代码

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
    return false;
}

function moveNavigation(byX) {
  var navigation= document.getElementsByClassName("tab")[0];
  navigation.scrollLeft= navigation.scrollLeft + byX;
}

/* Style the tab */
.tab-navigation {
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab {
  overflow-x: hidden;
  white-space: nowrap;
  margin-left: 30px;
  margin-right: 30px;
}

/* Style the buttons inside the tab */
.tab button,
.tab-control {
  background-color: inherit;
  display: inline-block;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.arrow-left {
  float: left;
}

.arrow-right {
  float: right;
}

<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab-navigation">
  <button class="tab-control arrow-left" onclick="moveNavigation(-100)">
    &lt;
  </button>
  <button class="tab-control arrow-right" onclick="moveNavigation(100)">
    &gt;
  </button>

  <div class="tab">
    <button class="tablinks" onclick="return openCity(event,'London')">Jan 2017</button>
    <button class="tablinks" onclick="return openCity(event, 'Paris')">Feb 2017</button>
    <button class="tablinks" onclick="return openCity(event, 'Tokyo')">Mar 2017</button>
    <button class="tablinks" onclick="return openCity(event,'London')">April 2017</button>
    <button class="tablinks" onclick="return openCity(event,'London')">May 2017</button>
    <button class="tablinks" onclick="return openCity(event,'London')">June 2017</button>
    <button class="tablinks" onclick="return openCity(event, 'Paris')">July 2017</button>
    <button class="tablinks" onclick="return openCity(event, 'Tokyo')">August 2017</button>
    <button class="tablinks" onclick="return openCity(event,'London')">September 2017</button>
    <button class="tablinks" onclick="openCity(event,'London')">October 2017</button>
    <button class="tablinks" onclick="openCity(event,'London')">Novenber 2017</button>
    <button class="tablinks" onclick="openCity(event, 'Paris')">December 2017</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Jan 2018</button>
    <button class="tablinks" onclick="openCity(event,'London')">Feb 2018</button>
  </div>
</div>

<div id="London" class="tabcontent">
  <h3>Januaray</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Febrary</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>March</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>