当前位置:主页 > 网页特效 > TAB标签 >

jQuery制作响应式选项卡代码-页面变小时tabs变accordion

发布时间:2018/07/05 来源:互联网 浏览: 关键词:响应式 jquery 选项卡 tab 
jQuery制作响应式选项卡代码-页面变小时tabs变accordion jQuery制作响应式选项卡代码-页面变小时tabs变accordion
阿里云

简要教程

这个插件提供了一种响应式的tabs选项卡功能,当显示屏幕变得足够小时,tabs选项卡就转变为accordion手风琴效果。

特点

屏幕变小时会由tabs选项卡转换为accordion手风琴效果。

使用javascript/jQuery技术进行转换。

使用css来渲染桌面、平板和手机。

在tab转换时有回调函数。

tabs能通过url打开。

tabs能自动旋转。

tabs能够折叠。

tabs能够基于窗口折叠。

浏览器兼容性好,支持IE7+、 Chrome、Firefox、Safari和Opera。

可在多种设备上使用它,电脑、平板和手机均可用。

使用方法

需要jQuery(jQuery最低版本要求为jQuery 1.7.0)

引入jquery.responsiveTabs.js文件。

引入responsive-tabs.css和style.css文件。

HTML结构

<ul>
    <li><ahref="#tab-1"> .... </a></li>
    <li><ahref="#tab-2"> .... </a></li>
    <li><ahref="#tab-3"> .... </a></li>
    </ul>
 
    <divid="tab-1"> ....... </div>
    <divid="tab-2"> ....... </div>
    <divid="tab-3"> ....... </div>
</div>

使用jQuery调用插件

$('#responsiveTabsDemo').responsiveTabs({
    startCollapsed:'accordion'
});

共有人阅读,期待你的评论!评论
Top