基于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中SQL语句的应用实现
May 04 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
js调试系列 初识控制台
Jun 18 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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实现的四则运算表达式计算实现代码
2011/08/02 PHP
php数组删除元素示例
2014/03/21 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
PHP实现简易blog的制作
2016/10/24 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
PDO::errorInfo讲解
2019/01/28 PHP
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
JavaScript字符串对象
2017/01/14 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
Python网络编程 Python套接字编程
2017/09/13 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
python自动化发送邮件实例讲解
2021/01/04 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
运动会广播稿100字
2014/01/11 职场文书
单位介绍信范文
2014/01/18 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
元旦晚会邀请函
2014/01/27 职场文书
2014年三万活动总结
2014/04/26 职场文书
医院合作协议书
2014/08/19 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
php修改word的实例方法
2021/11/17 PHP
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python