自己手写简约实用的Jquery tabs插件(基于bootstrap环境)

编程之家收集整理的这篇文章主要介绍了自己手写简约实用的Jquery tabs插件(基于bootstrap环境)编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

 

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

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

<style>
//选项卡列表样式
#booksfilter li
{
padding:5px;//内边距 5px
list-style-type:none;
float:left;0px;
}
//设置‘|’的左右边距
#booksfilter span
{
margin-left:
margin-right:5px;
}

//选项卡链接的样式
#booksfilter a
{
    padding://内边距:5px
    text-decoration://无下划线
}
//选项卡被选中或当鼠标移动到选项卡时的样式
#booksfilter a.cur,#booksfilter a:hover
{
    background-color:#e67e22;//背景色    
color
:white;//前景色 border-radius://圆角 } </style>

 

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

$(function()
{
$('#booksfilter a').each((i)
{

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

});

});

 

好了,以上就是实现全过程,下面上图,看看完成后的效果

QQ图片20160711172127.png

怎么样,还不错吧,当然你也可以修改上述代码做出更好看的tabs,期待与你的交流。

本文首发于顶求网,转载请注明来源。

总结

以上是编程之家为你收集整理的自己手写简约实用的Jquery tabs插件(基于bootstrap环境)全部内容,希望文章能够帮你解决自己手写简约实用的Jquery tabs插件(基于bootstrap环境)所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

相关文章

猜你在找的Bootstrap相关文章

BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起。下面直接上图,看看完成后的结果:
顶求网首页是一个web2.0博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所以,在首页中主要分三个板块——文章、图书、用户。另外,网站的头部和尾部还要有导航(navigato
在视窗足够大的时候是没有任何问题的,但是当拖动改变视窗的大小后会发现布局又变乱了,这个问题困扰了我许久,最后通过分析bootcss的源码我发现该网站在所有使用affix的元素的class中都添加了'h
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是,它的样式比较单一,如何才能在其原有的基础上做出更加美观的效果呢,我一直在考虑这个问题。另外,Bootstrap中的tabs必
先看看劳动成果 布局 左右各一半(col-md-6) 左侧登录框占左侧一半的10/12 右侧是登录系统的注意事项 使用到的BootStrap元素 well 输入框组(input-group) 按钮(b
先吐槽一下ThinkPHP3.1版的分页样式,虽然看起来也很简单大方,但是所有的页码全是使用简单的数字,之间的空隙比较小,不大容易点,还有那个“前5页”和“后5页”显得有点多余,因为点击当前显示第一页
在做WEB开发的时候我们经常会遇到分页的处理,如果在PC上显示网页的话,使用传统的分页是可以接受的。那么,当我们为手机或其他移动端设计界面的话,使用分页未免有些笨拙和难以使用,这时候我们可以使用在单页
为了和文章分类部分的样式进行区分,我决定自己动手写一个具有其他样式的分类标签集。刚好看到豆瓣读书板块的首页中的图书分类标签还不错,于是决定自己写一个类似的样式。首先是HTML代码部分: 可以看到图书分
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注