这是一组非常实用的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'); });}); |
