Blättern Tabs mit jQuery?

Question

Ich habe ein horizontales Tab-Menü. Diese Registerkarten sind alle li-Elemente. Ich zeige immer 5 von ihnen auf einmal. Links und rechts habe ich Knöpfe, die diese Tabs zu beiden Seiten scrollen. Ich bin mir nicht sicher, wie ich das erreichen soll. Kann ich die nächsten 5 Tabs in ein anderes Div setzen, das beim Klick angezeigt wird? Das wäre nicht die beste Lösung, oder? Kann ich das irgendwie mit JavaScript oder jQuery machen?

Danke.

Answer 1

Führe einen übergeordneten Container div für die ul mit overflow: hidden und position: relative oder position: absolute und einer festen Breite. Wenn Sie auf den nächsten oder vorherigen Knopf klicken, stellen Sie die linke Position des ul ein.

Ein Beispielcode als Referenz. Nicht vollständig ein

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