基于BootStrap环境编写jQuery标签插件

我一直想修改网站首页的图书展示部分。之前的显示器使用了BootStrap的传统折叠，占用了很多页面，不够美观，操作起来比较麻烦。因此，我有了使用Jquery作为书籍显示标签的想法。之前在网上搜了很久，都不满意。

让我们来看看我的实现过程：

第一部分是HTML，按照结构简单，突出干货的思路设计。选项卡使用列表，超链接被插入列表。当然，这里的超链接只是作为按钮使用。当您单击任何链接时，您将切换到相应的选项卡。标签页的内容部分直接使用div，在DIV中一本书一本书的排列显示。让我们看看下面的具体代码：

div class=' col-MD-8 ' id=' index books '！-tab部分-H4类=' title ' style=' padding-bottom :10 px；'ul id=' books filter ' style=' float : right；' font-size :14 px；'lia class=' cur ' href=' JavaScript : void(0)；'入门/aspan |/span/lilia href=' JavaScript 3360 void(0)；'实战/aspan |/span/lilia href=' JavaScript 3360 void(0)；'高级/aspan |/span/Li/ul/H4 div class=' row ' div class=' book list '！-入门级书籍展览-div class=' col-MD-3 ' div class=' thumbnail ' style=' height :220 px；'边框宽度：0 px；'a href='/book/577 e11a a2f 33c ' target=' _ blank ' img style=' height :130 px；'src=' http :3358 im G3 . doubanio.com/mpic/s 1039608 . jpg '/adiv class=' caption ' H5 style=' text-align : center；a href='/book/577 e11a a2f 33c ' 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 :220 px；'边框宽度：0 px；'a href='/book/577 e11a a2f 33c ' target=' _ blank ' img style=' height :130 px；'src=' http :3358 im G3 . doubanio.com/mpic/s 1039608 . jpg '/adiv class=' caption ' H5 style=' text-align : center；'a href='/book/577 e11a a2f 33c ' 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 :220 px；'边框宽度：0 px；'a href='/book/577 e11a a2f 33c ' target=' _ blank ' img style=' height :130 px；'src=' http :3358 im G3 . doubanio.com/mpic/s 1039608 . jpg '/adiv class=' caption ' H5 style=' text-align : center；'a href='/book/577 e11a a2f 33c ' target=' _ blank ' Linux权威指南(./a/H5 p style=' text-align : center；'注释(0)span class=' badge ' 1建议/span/p/div/div/div！-其他高级书籍(循环打印)-/div/div根据代码，此选项卡中有三个选项，包括入门、实战和高级。如果您单击不同的选项卡，将会列出这种类型的书籍。

让我们看看样式表部分，看看如何美化选项卡和书籍显示部分的内容：

Style//选项卡列表style # book filter Li { padd :5 px；//内边距5pxlist-style-type : none；float:leftpadding:0px}//设置“| # books filter span { margin-left :5 px；右边距：5 px；}//tab链接# booksfilter a { padding:5px//内边距：5 ext XT-decoration : none；//无下划线}//选择选项卡或鼠标移动到选项卡# booksfiltera.cur、# bookfilter a : haver {//背景颜色color:white//前景色边框-radius :5 px；//圆角}/样式代码注释已经非常详细了，当然可以对其进行修改，设计出更加美观的样式。当点击并切换选项卡时，这部分交互将被移交给Jquery。需要将当前点击的标签页的内容设置为要显示的内容，隐藏其他标签页，将当前标签页按钮设置为选中，删除其他标签页的选中状态。以下代码：

$(function(){ $(' # book filter a '))。每个(函数(i){$(this))。单击(function(){$(this))。add CLaSS(' cur ')；$(这个)。父项()。兄弟姐妹()。查找(' a ')。remove CLaSS(' cur ')；//删除cur类$('。book list’)。eq(i)。任何其他选项的show()；//显示此节点$('。book list’)。eq (i)。兄弟姐妹()。hide()；//隐藏兄弟节点})})；});

以上是边肖介绍的基于BootStrap环境的jQuery tabs插件。希望对大家有帮助。如果你想了解更多，请关注我们！