步驟：
1.首先布局樣式，要有一個容器存放ul，還有兩個左右切換Tab頁簽的按鈕；
2.當ul的寬度超出div時，ul下的li要不換行;
3.給切換Tab頁簽的按鈕添加方法：當點擊向左切換Tab頁簽的時候，以左邊的頁簽為標准，當點擊向右切換Tab頁簽的時候，以右邊的頁簽為標准；
具體內容如下：
1.首先布局樣式，要有一個容器存放ul，還有兩個左右切換Tab頁簽的按鈕；
//div是左按鈕,span是顯示左按鈕箭頭的圖片
<div id="leftButton" onclick="showLeft()" class="leftClass" style="display:none;background-color:#FAF9DE">
<span></span>
</div>
//存放ul的容器
<div style="float:left">
<div id="dww-menu" class="mod-tab">
<ul id="tabs" class="tab-nav" style="white-space:nowrap;"></ul>
</div>
</div>
//div是右按鈕,span是顯示右按鈕箭頭的圖片
<div id="rightButton" onclick="showRight()" class="rightClass"
style="display:none;background-color:#FAF9DE;float:left">
<span></span>
</div>
.rightClass {
width:20px;
height:30px;
cursor:pointer;
border-left:1px solid #ccc;
text-align:center;
}
.rightClass span{
margin-top:10px;
margin-left:2px;
width:15px;
height:16px;
display:block;
background:url(Images/picture.png) repeat-x;
background-position:0% 100%;//此處為百分比圖片定位，公式為(顯示的圖片的高度=（picture.png圖片的高度-容器的高度）*百分比)
}
左按鈕的跟右按鈕類似只是后邊那個圖片定位的百分比變啦，去哦他的都一樣。
2.當ul的寬度超出div時，ul下的li要不換行：
在ul中添加style="white-space:nowrap;”，在li中添加style="display:inline;float:left"
3.給切換Tab頁簽的按鈕添加方法：當點擊向左切換Tab頁簽的時候，以左邊的頁簽為標准，當點擊向右切換Tab頁簽的時候，以右邊的頁簽為標准：
在這只是說一下思路，其實很簡單。當點擊左邊按鈕的時候，將#tabs設置為float:left，獲取到顯示的li的寬度為width，右邊隱藏兩個li(width-兩個li的寬度),左邊顯示一個li(width+一個li的寬度),然后遍歷li，然后用這個寬度跟#dww-menu這個div的寬度比較，如果小於就把隱藏的li顯示一個（同時伴隨着width的計算），如果還小於就再顯示一個（同時伴隨着width的計算），然后設置ul的寬度為顯示的li的寬度;同理，向右的按鈕也是一樣。
這地方可能會有納悶：為什么要一次隱藏兩個呢？
其實這地方不是固定的，你也可以隱藏一個，如果li的寬度還是大於#dww-menu的寬度就再隱藏一個，我這隱藏兩個的原因是，如果顯示的那個Tab比較寬，而，隱藏的這個比較窄，所以一次性就隱藏掉啦，不用進行第二次隱藏了。
東西很簡單，就是有一些細節需要注意下。因為公司涉及到保密，所以代碼還有效果就沒法上傳啦，但還是希望對大家有點幫助，有說的不對的地方也希望指點出來，大家共同進步。
一種蛋蛋的憂桑。。。