自己手写简约实用的Jquery tabs插件(基于bootstrap环境)
一直想改版网站首页的图书展示部分,以前的展示是使用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
{
background-color:#e67e22;//背景色
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();//隐藏兄弟节点
}) }); });
好了,以上就是实现全过程,下面上图,看看完成后的效果:
怎么样,还不错吧,当然你也可以修改上述代码做出更好看的tabs,期待与你的交流。
本文首发于顶求网,转载请注明来源。
自己手写简约实用的Jquery tabs插件(基于bootstrap环境)的更多相关文章
- bootstrap-简洁实用的jQuery手风琴插件
前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...
- 精选29款非常实用的jQuery应用插件
今天我们来分享一些实用的jQuery应用插件,没有特别花哨,但都比较实用,jQuery菜单.jQuery图片都有涉及到,一起来看看. 1.jQuery+CSS3仿IOS无线局域网Wifi DEMO演示 ...
- 分享7款非常实用的jQuery/CSS3插件演示和源码
上次我们分享了15款效果很酷的最新jQuery/CSS3特效,非常不错,今天要分享7个非常实用的jQuery/CSS3插件演示和源码,一起来看看. 1.jQuery ajax点击地图显示商家网点分布 ...
- 绝对震撼 10个实用的jQuery/HTML5插件
在HTML5的世界里,我们见证了无数的特效奇迹,但很多特效我们很难在网页中应用,今天我们要分享10款效果震撼但是又比较实用的jQuery/HTML5插件,希望这些项目在应用的过程中也能给你带来设计灵感 ...
- 5款实用的jQuery验证码插件
效果图 文档结构 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 强大实用的jQuery幻灯片插件Owl Carousel
演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...
- 简单实用的jQuery分页插件
在做商城和订单管理的时候,常常会用到分页功能,所以我封装了一个jQuery的分页插件,该插件主要实现上下翻页,输入数字跳转等功能. 具体实现如下: 输入参数需要当前页码pageNo,总页码totalP ...
- 几个实用的 jQuery 插件
1. owl.carousel -- 强大实用的jQuery幻灯片插件 2. jquery.nicescroll.min.js -- 自定义滚动条样式,支持 div,iframe,html 等. 3. ...
- 移动开发必备!15款jQuery Mobile插件
移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行.jQuery Mobile这样一款基于j ...
随机推荐
- Lua读写文件
文件读写 文件读写对制作游戏很有帮助.可以调用别的文件中的代码,保存最高分.游戏存档.玩家状态等信写到文件中. 首先,让我们看一个简单的命令:dofile.这个命令会读入另一个文件的代码并立即执行. ...
- Windows 之 删除保存的共享凭据(用户名和密码)
当我们在访问Windows共享文件夹或者NAS网络共享盘的时候,Windows会提示输入访问共享所需要的用户名和密码,如果我们勾选了“记住我的凭据”,Windows 就会将认证凭据保存到计算机中,以方 ...
- Cows
Farmer John's cows have discovered that the clover growing along the ridge of the hill (which we can ...
- 1.4.7 Schema API
Schema API Schema API允许使用REST API每个集合(collection)(或者单机solr的核(core)).包含了定义字段类型,字段,动态字段,复制字段等.在solr4.2 ...
- xcode5项目图标添加
转载文章 地址http://www.360doc.com/content/14/0103/08/14615320_342227413.shtml 最近提交itunesconnect应用时,有个警告说缺 ...
- [Arduino] 基于Xbee Pro和网络技术的智能公交系统设计
转自:http://www.21ic.com/app/rf/201112/99474.htm 引言 公共交通具有个体交通无法比拟的强大优势,优先发展城市公共交通系统是解决大.中城市交通问题的最佳途径. ...
- iOS中的网络请求 和 网络监测
1.网络监测 //根据主机名判断网络是否连接 Reachability *reach = [Reachability reachabilityWithHostName:@"www.baidu ...
- Hive编程(影印版)
<Hive编程(影印版)> 基本信息 原书名:Programming Hive 作者: Edward Capriolo Dean Wampler Jason Rutherglen 出版社: ...
- bash 中的case语法
CASE语法格式备忘 case $variable-name in pattern1) command1 ... .... commandN ;; pattern2|pattern3|pattern4 ...
- mysql_DML_delete
delete from 表名 删除表里的数据 可以配合where试用