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

Question

i am generated tabs as per my requirement but when the tabs are becoming more they are coming in next line.AS they look like odd i want to use right and left scroll option. The next and previous functionality should work. but i do not no how to include this functionality as i am new to script can anyone help me.i am have generated tabs if the tabs are generated more they are coming in next line. In this functionality all are static tabs how to make them proper to come when they become more.

 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

what if you just use css to solve this problem.

add white-space: nowrap; and overflow-x: scroll; to .tab :

then remove float: left; from .tab button and add display: inline-block; instead

this will make your .tab element scrolling and prevent your buttons from wrapping to the next line.

/* 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;
}

this will be the result:

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

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

Combining Joel Stüdle's answer with a bit of JS should do the trick:

1. add white-space: nowrap; and overflow-x: hidden; to .tab and a bit of margin to the sides (for controls)
2. remove float: left; from .tab button and add display: inline-block;
3. add a wrapper around .tab to maintain all navigation elements in one space (called .tab-navigation ), move the background-color from .tab to it so that all controls have the same background color
4. inside the wrapper, add two floated navigation controls .arrow-left and .arrow-right that call a new function moveNavigation(byX)
5. add a new function moveNavigation(byX) to do the scrolling

I also created a Fiddle of it so you can play around with it.

---

Code

 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>