Scrolling tabs with jQuery?

Question

I have a menu of horizontal tabs. These tabs are all li elements. I always show 5 of them at once. Left and right, I have buttons that scroll these tabs in both directions. I just don’t know how to achieve this. Is it possible to add the following 5 tabs to another div that will be displayed by click? That would not be the best solution, right? Can I do this using JavaScript or jQuery?

Thanks.

Answer 1

Create a parent div container for ul with overflow: hidden and position: relative or position: absolute and a fixed width. When you press the next or previous button, adjust the left position of ul .

Sample code for reference. Incomplete

HTML

 <button id="prev">Prev</button> <button id="next">Next</button> <div id="container"> <ul id="contentcont"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> 

CSS

 #container { width: 330px; height: 300px; overflow: hidden; position: relative; } #contentcont { width: 1000px; position: absolute; } #contentcont li { width: 100px; float: left; margin-right: 10px; border: 1px solid #a9a9a9; height: 280px; } 

JQuery

 $(function(){ $("#prev").click(function(){ $("#contentcont").animate({'left': '-=110'}); return false; }); $("#next").click(function(){ $("#contentcont").animate({'left': '+=110'}); return false; }); });