这是一组非常实用的Tabs选项卡设计效果。这组选项卡同4之后效果,分别为基本选项卡,彩色带图标的选项卡,下划线样式选项卡和垂直选项卡。这些选项卡样式简洁大方,兼容IE8,非常实用。
使用方法
每一个选项卡都对应一个单独的样式文件,需要那种类型的选项卡就引入对应的CSS文件。另外特效中使用jQuery来控制用户和选项卡的交互动作。
<link rel="stylesheet" type="text/css" href="css/tabs-basic.css"> <link rel="stylesheet" type="text/css" href="css/tabs-colorful.css"> <link rel="stylesheet" type="text/css" href="css/tabs-underlined.css"> <link rel="stylesheet" type="text/css" href="css/tabs-vertical.css"> <script type="text/javascript" src="src/jquery.min.js"></script>
HTML结构
这些选项卡的HTML结构基本类似:使用一个<div>
作为容器,选项卡的分页使用无序列表来制作,内容页则使用嵌套的<div>
元素来制作。
<div class="tabs-basic"> <-- 分页标签 --> <ul> <li> <a class="tab-active" data-index="0" href="#">First tab</a> </li> <li> <a data-index="1" href="#">Second tab</a> </li> <li> <a data-index="2" href="#">Third tab</a> </li> </ul> <!-- 内容页 --> <div class="tabs-content-placeholder"> <div class="tab-content-active"> <p>......</p> <img src="assets/images/1.jpg" alt="Banhoff"> </div> <div> <p>......</p> <img src="assets/images/2.jpg" alt="Colosseum"> </div> <div> <p>......</p> <img src="assets/images/3.jpg" alt="Sands of Life"> </div> </div> </div>
JavaScript
这些Tabs选项卡使用jQuery来完成用户的交互动作,实现方法非常简单,只是在用户点击相应的Tabs分页时为内容页添加和移除相应的class。
$(document).ready(function() { var widget = $('.tabs-basic'); var tabs = widget.find('ul a'), content = widget.find('.tabs-content-placeholder > div'); tabs.on('click', function (e) { e.preventDefault(); var index = $(this).data('index'); tabs.removeClass('tab-active'); content.removeClass('tab-content-active'); $(this).addClass('tab-active'); content.eq(index).addClass('tab-content-active'); }); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!