使用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" οnclick="javascript:history.go(-1)" style="float:right;margin: 16px 4px;"></span>
			<span class="ui-icon ui-icon-circle-triangle-e"  οnclick="tabsgo(1)" style="float:right;margin: 16px 4px;"></span>
			<span class="ui-icon ui-icon-circle-triangle-w" οnclick="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分类