基于BootStrap环境写jQuery tabs插件


Posted in Javascript onJuly 12, 2016

一直想改版网站首页的图书展示部分,以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大,也不够美观,操作也来说比较麻烦。于是有了自己利用Jquery来做一个图书展示的tabs的想法,之前也在网上找了半天,并不是很满意。

下面来看看我的实现过程:

首先是HTML部分,HTML部分按照结构简约,突出干货的思路来设计。选项卡使用了列表,在列表中插入了超链接,当然这里的超链接只是作为按钮使用的,当点击任何一个链接,就切换到对应的选项卡。选项卡的内容部分直接使用DIV,将图书的展示一本一本的排列在div中,下面看看具体代码:

<div class="col-md-8" id="indexbooks">
<!-- 选项卡部分 -->
<h4 class="title" style="padding-bottom:10px;">
图 书 
<ul id="booksfilter" style="float:right;font-size:14px;"> 
<li><a class="cur" href="javascript:void(0);">入门</a><span>|</span></li>
<li><a href="javascript:void(0);">实战</a><span>|</span></li>
<li><a href="javascript:void(0);">进阶</a><span>|</span></li>
</ul>
</h4>
<div class="row">
<div class="booklist">
<!-- 入门级图书展示 -->
<div class="col-md-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="/book/577e11aa2f33c" target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s1039608.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="/book/577e11aa2f33c" target="_blank">
LINUX权威指南(... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">1推荐</span></p>
</div>
</div>
</div>
<!-- 其他入门图书(循环打印) -->
</div>
<div class="booklist">
<!-- 实战型图书展示 -->
<div class="col-md-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="/book/577e11aa2f33c" target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s1039608.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="/book/577e11aa2f33c" target="_blank">
LINUX权威指南(... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">1推荐</span></p>
</div>
</div>
</div>
<!-- 其他实战型图书(循环打印) -->
</div>
<div class="booklist">
<!-- 进阶型图书展示 -->
<div class="col-md-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="/book/577e11aa2f33c" target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s1039608.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="/book/577e11aa2f33c" target="_blank">
LINUX权威指南(... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">1推荐</span></p>
</div>
</div>
</div>
<!-- 其他进阶图书(循环打印) -->
</div>
</div>

由代码可知,该选项卡一共有三个选项,分为入门、实战、进阶,点击不同的选项卡,则会列出该类型的图书。

下面来看看样式表部分,看看如何美化选项卡及图书展示部分的内容:

<style>
//选项卡列表样式
#booksfilter li
{
padding:5px;//内边距 5px
list-style-type:none;
float:left;
padding:0px;
}
//设置‘|'的左右边距
#booksfilter span
{
margin-left:5px;
margin-right:5px;
}
//选项卡链接的样式
#booksfilter a
{
padding:5px;//内边距:5px
text-decoration:none;//无下划线
}
//选项卡被选中或当鼠标移动到选项卡时的样式
#booksfilter a.cur,#booksfilter a:hover
{
//背景色
color:white;//前景色
border-radius:5px;//圆角
}
</style>

代码注释已经很详细了,当然大家也可以修改它来设计出更美的样式。而当选项卡点击切换的时候,这部分的交互就要交给Jquery来完成了,它需要设置当前点击的选项卡内容为要显示的内容,而隐藏其他的选项卡,并且设置当前选项卡按钮为选中,删除其他选项卡的选中状态,下面上代码:

$(function()
{
$('#booksfilter a').each(function(i)
{
$(this).click(function(){
$(this).addClass('cur');
$(this).parent().siblings().find('a').removeClass('cur');//删除其他任何选项的cur类
$('.booklist').eq(i).show();//显示本节点
$('.booklist').eq(i).siblings().hide();//隐藏兄弟节点
})
});
});

基于BootStrap环境写jQuery tabs插件

以上所述是小编给大家介绍的基于BootStrap环境写的jQuery tabs插件,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木!

Javascript 相关文章推荐
JavaScript中this关键字使用方法详解
Mar 08 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
详解vuejs之v-for列表渲染
Jun 22 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
Vue和Flask通信的实现
May 19 Vue.js
Angular 路由route实例代码
Jul 12 #Javascript
javascript中获取class的简单实现
Jul 12 #Javascript
springMVC结合AjaxForm上传文件
Jul 12 #Javascript
require简单实现单页应用程序(SPA)
Jul 12 #Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 #Javascript
javascript中Date对象应用之简易日历实现
Jul 12 #Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 #Javascript
You might like
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
php获取操作系统语言代码
2013/11/04 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
php swoft框架实例用法
2020/12/22 PHP
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
python中的变量如何开辟内存
2018/06/26 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
基于Python函数和变量名解析
2019/07/19 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
python实现批处理文件
2020/07/28 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
校园招聘策划书
2014/01/09 职场文书
幼儿园春游活动方案
2014/01/19 职场文书
好人好事演讲稿
2014/09/01 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
golang 实现菜单树的生成方式
2021/04/28 Golang