Прокрутить вкладки с помощью jQuery?

Question

У меня есть меню горизонтальных вкладок. Эти вкладки - все элементы li. Я показываю всегда 5 из них сразу. Влево и вправо у меня есть кнопки, которые прокручивают эти вкладки в обе стороны. Я просто не знаю, как это достичь. Можно ли добавить следующие 5 вкладок в другой div, который будет отображаться по клику? Это не было бы лучшим решением, не так ли? Могу ли я сделать это с JavaScript или jQuery?

Спасибо.

Answer 1

Сделать родительский контейнер div для ul с overflow: hidden и position: relative или position: absolute и фиксированной шириной. При нажатии на следующую или предыдущую кнопку отрегулируйте левое положение ul.

Образец кода для справки. Не завершить один

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