步骤：
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比较宽，而，隐藏的这个比较窄，所以一次性就隐藏掉啦，不用进行第二次隐藏了。
东西很简单，就是有一些细节需要注意下。因为公司涉及到保密，所以代码还有效果就没法上传啦，但还是希望对大家有点帮助，有说的不对的地方也希望指点出来，大家共同进步。
一种蛋蛋的忧桑。。。
