最新资源
简介
一个轻量级、语义化（SEO友好）且易于配置的jQuery选项卡插件，它提供了在页面上显示多个内容块的干净简单的功能
它可以开箱即用地使用HTML元素，您可以使用任何您喜欢的HTML元素和结构。
请参阅实际操作：
如何使用它:
1.将jQuery库和选项卡插件的文件插入页面。
<link rel="stylesheet" href="jquery-tabs.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="jquery-tabs.js"></script>
2.为选项卡UI创建HTML。该插件适用于任何HTML元素，即使它们实际上不是选项卡。
<div class="content">
<section>
<h3>JavaScript</h3>
<p>JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. </p>
<p>Over 97% of websites use JavaScript on the client side for web page behavior, often incorporating third-party libraries. </p>
</section>
<section>
<h3>HTML</h3>
<p>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. </p>
<p>It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.</p>
</section>
<section>
<h3>CSS/CSS3</h3>
<p>Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. </p>
<p>CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. </p>
</section>
</div>
3.调用顶部容器上的函数并完成。
jQuery('.content').createTabs({
// default: section
children: 'section',
// default: h2
childrenTitle: 'h3',
});
4.配置fadeIn和fadeOut动画。0=禁用。
jQuery('.content').createTabs({
// default: 500
fade: 300
});
5.在选项卡UI的底部添加下一个/上一个导航按钮。
jQuery('.content').createTabs({
// button text
prevText: 'Prev',
nextText: 'Next',
// additional CSS class
prevClass: 'btn',
nextClass: 'btn',
});
6.在选项卡更改时执行一个功能。
jQuery('.content')
.on('tab_change', function(){
alert('TAB CHANGED!');
})
预览截图
简单 用户友好 选项卡插件 jquery Tabs.js