jquery ui tabs 分行问题

使用jquery ui tabs时，当ul li太多会自动分行影响美观。

问题图示：

解决思路：

固定容器高度为单行高度，

添加左右按钮，

点击right，隐藏当前可见的第一个分类li；

点击left，显示当前最后一个hidden分类li。

当最后一个li“分类A”的offset.top为单行高度时，使right失效防止全部被隐藏。

解决方法：

1.给tabs的ul固定单行长宽，overflow:hidden;

#tabs_ul{overflow:hidden;height:43px;width: 740px;}

2.添加左右按钮图标

<ul id="tabs_ul"><span class="ui-icon ui-icon-closethick" onclick="javascript:history.go(-1)" style="float:right;margin: 16px 4px;"></span><span class="ui-icon ui-icon-circle-triangle-e"  onclick="tabsgo(1)" style="float:right;margin: 16px 4px;"></span><span class="ui-icon ui-icon-circle-triangle-w" onclick="tabsgo(0)" style="float:right;margin: 16px 4px;"></span><li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#room_all">总类</a></li>。。。  </ul> 

3.添加javascript代码

function tabsgo (lr) {if (lr){if($("#room_tabs_ul li:visible:last").offset().top>30)//防止全部被隐藏$("#room_tabs_ul li:visible:eq(1)").hide();//eq(0)为所有分类，永不隐藏}else$("#room_tabs_ul li:hidden:last").show();  }

效果图

点击左右箭头显示隐藏tabs分类