一直想改版网站首页的图书展示部分，以前的展示是使用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="/UploadFiles/2021-04-02/s1039608.jpg">由代码可知，该选项卡一共有三个选项，分为入门、实战、进阶，点击不同的选项卡，则会列出该类型的图书。
下面来看看样式表部分，看看如何美化选项卡及图书展示部分的内容：
<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插件，希望对大家有所帮助，如果大家想了解更多内容敬请关注！
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。