2 mayan968237 mayan968237 于 2017.01.05 02:15 提问

导航栏,左右箭头,可以点击左右箭头

由于数据多导航栏溢出,所以求个左右可以滑动的按钮。
比如有7个导航栏。页面大小只能显示5个。默认显示12345导航。点击右侧按钮显示23456导航。再点击左侧按钮显示12345导航。就这个意思。。

2个回答

Zhanjr
Zhanjr   2017.01.05 08:56

导航栏1-7依次排序,下标为0-6,下标0-4格式设为显示,5-6设为隐藏
js函数,取左面第一个导航的下标index。
判断index,如果index=0则点左按钮没效果,index=2则点右按钮没效果。
实现函数,左按钮的话设置下标index+4的格式为隐藏,设置下标index-1的格式为显示。
右按钮设置下标index-1的格式为显示,下标index+4的格式为隐藏。

showbo
showbo   Ds   Rxr 2017.01.05 09:03

easyui的tabs有此功能。。超过tab容器后出现左右箭头移动tab。。

http://www.jeasyui.com/demo/main/index.php?plugin=Tabs&theme=default&dir=ltr&pitem=Basic

看“Tabs Tools”示例,添加多个tab后超过容器就会出现你要的效果,可以配置tabWidth定义tab宽度

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
html5 中导航栏中菜单过长,在Div上层添加提示左右滑动的箭头,使用Hello mui功能
使用hello mui主要设计,一开始不知道怎么做,后来突然想到使用position:absoulte;可以将元素固定到某一位置,所以就在和导航栏同一DIV级别的地方添加了span元素,虽然图表没有特别的美化,但是总体的功能实现了。 class="mui-control-item mui-active" class="mui-control-item" href="javaSc
带左右箭头点击切换的无缝滚动效果
现在网络上常用的焦点图带箭头点击切换,无缝滚动
使用jquery + css + html实现点击左右箭头切换图片
html页面如下 ,新建indexhtml,拷贝以下内容 复制代码 代码如下: 无标题文档                         css样式 ,新建MyStyle.css拷贝以下内容 复制代码 代码如下: * {mar
ul li宽度超出div宽度点击左右箭头移动
转载自:http://blog.csdn.net/chenhisen/article/details/50337377             无标题文档         ul{margin:0;padding:0;}     li{list-style:none;}     .box{width: 500px; margin: au
原生JS 左右箭头选择日期
先上个效果图,就是用左右尖括号可改变中间日期的值。(点击中间显示区域有时间选择器弹框,用的插件就不说了,主要说自己原创的部分)                                                                          HTML部分 (左右箭头都是用的图片素材,网上一大把,这里我就显示我本地地址了)
js左右箭头图片切换
#content{ width: 600px; height: 501px; position: relative; margin: 40px auto; } #content a{ width: 50px; height: 50px; background: rgba(240,240,240,0.5); border: 3px #fff solid; font-size: 40
android 左右滑动出现箭头提示
android viewfilper左右滑动出现箭头
js控制div左右切换带左右箭头
js控制div左右切换带左右箭头
点击左右箭头播放和自动轮播
html:
jquery实现点击左右箭头切换
html部分<div class="contain"> <div class="box"> <ul class="box_wheel"> <li>111</li> <li>222</li> <li&