基于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 相关文章推荐
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
js实现div弹出层的方法
Nov 20 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 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检测图片木马多进制编程实践
2013/04/11 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
vue实现简单图片上传
2020/06/30 Javascript
python中map()函数的使用方法示例
2017/09/29 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
生产主管岗位职责
2013/11/10 职场文书
教师自荐信
2013/12/10 职场文书
幼师自我鉴定
2014/02/01 职场文书
市场专员岗位职责
2014/02/14 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
高三化学教学反思
2016/02/22 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
PHP命令行与定时任务
2021/04/01 PHP