步骤:
1.首先布局样式,要有一个容器存放ul,还有两个左右切换Tab页签的按钮;
2.当ul的宽度超出div时,ul下的li要不换行;
3.给切换Tab页签的按钮添加方法:当点击向左切换Tab页签的时候,以左边的页签为标准,当点击向右切换Tab页签的时候,以右边的页签为标准;
具体内容如下:
1.首先布局样式,要有一个容器存放ul,还有两个左右切换Tab页签的按钮;
//div是左按钮,span是显示左按钮箭头的图片
<div id="leftButton" οnclick="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" οnclick="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比较宽,而,隐藏的这个比较窄,所以一次性就隐藏掉啦,不用进行第二次隐藏了。
东西很简单,就是有一些细节需要注意下。因为公司涉及到保密,所以代码还有效果就没法上传啦,但还是希望对大家有点帮助,有说的不对的地方也希望指点出来,大家共同进步。
一种蛋蛋的忧桑。。。