jQuery製表符滑塊需要

Question

我正在開發一個網站，需要一個帶製表符鏈接和滑塊功能的製表符滑塊。

當用戶點擊下面的鏈接時，當用戶點擊下一個和上一個按鈕時，內容會改變並且功能相同。

請參閱圖片以獲得更好理解。在此先感謝等待肯定的答覆後面

Answer 1

我希望下面的可以幫助你：

<script type="text/javascript"> 

$(document).ready(function(){ 
// Enable or leave the keys 
$('.slider').each(function(){ 
    if($('li:last',this).width()+$('li:last',this).offset().left-$('li:first',this).offset().left>$('div',this).width()){ 
     // enable the buttons 
     $('button',this).css('display','inline'); 
     $('button.prev',this).css('visibility','hidden'); 
    } 
}); 


    $(".slider .next").click(function(){ 
    //Remove the exist selector 
    //Set the width to the widest of either 
    var $div =$('div',this.parentNode) 
     ,maxoffset = $('li:last',$div).width()+$('li:last',$div).offset().left - $('li:first',$div).offset().left - $div.width() 
     ,offset = Math.abs(parseInt($('ul',$div).css('marginLeft'))) 
     ,diff = $div.width(); 

    if(offset >= maxoffset) 
     return; 
    else if (offset + diff >= maxoffset){ 
     diff = maxoffset - offset + 20; 
     // Hide this 
     $(this).css('visibility','hidden'); 
    } 
    // enable the other 
    $('.prev', this.parentNode).css('visibility','visible');   

    $("ul", $(this).parent()).animate({ 
     marginLeft: "-=" + diff 
    },400, 'swing'); 
}); 

$(".slider .prev").click(function(){ 

    var offset = Math.abs(parseInt($('ul',this.parentNode).css('marginLeft'))); 
    var diff = $('div',this.parentNode).width(); 
    if(offset <= 0) 
     return; 
    else if (offset - diff <= 0){ 
     $(this).css('visibility','hidden');  
     diff = offset; 
    } 
    $('.next', this.parentNode).css('visibility','visible'); 

    $("ul",$(this).parent()).animate({ 
     marginLeft: '+='+diff 
    },400, 'swing'); 
}); 
}); 

</script> 
<style> 
.slider .next, .slider .prev{ 
display:none; 
background-color:white; 
border:0; 
font:bold 20px Helvetica; 
color:#bbb; 
float:left; 
padding:0; 
margin:0; 
} 
    .slider .next{ 
float:right; 
} 
.slider div{ 
overflow:hidden; 
text-align:left; 
height:none; 
margin:0; 
padding:0; 
} 
    .slider div ul{ 
    width:3000px;// set to an arbitary high value 
    overflow:hidden; 
    margin:0; 
    padding:0; 
    margin-left:0; 
} 
    .slider div ul li{ 
     display:inline; 
     padding:10px; 
     margin:0; 
     background:#eee; 
     border:1px solid #ddd; 
    } 
</style> 

<div class='slider'> 
<button class='prev'>&lt;</button> 
<button class='next'>&gt;</button> 
<div> 

    <ul> 
     <li>Apples</li> 
     <li>Pears</li> 
     <li>Stairs</li> 
     <li>Cares</li> 
     <li>Elephants</li> 
     <li>Spanish Chickens</li> 
     <li>Marlborough House</li> 
     <li>Thameside Tavern</li> 
    </ul> 
</div> 

參考： http://perplexed.co.uk/1991_jquery_scroll_tabs_like_browser_tabs.htm