基于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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
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数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
Javascript 实用小技巧
2010/04/07 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
npm的lock机制解析
2019/06/20 Javascript
python复制文件代码实现
2013/12/23 Python
python之import机制详解
2014/07/03 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
实例讲解Python爬取网页数据
2018/07/08 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
通过cmd进入python的步骤
2020/06/16 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
留学自荐信的技巧
2013/10/17 职场文书
教师旷工检讨书
2014/01/18 职场文书
白血病募捐倡议书
2014/05/14 职场文书
民间借贷协议书范本
2014/10/01 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
医学生自荐信范文
2015/03/05 职场文书
最美乡村教师观后感
2015/06/11 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python