当前位置：首页 > 网页特效 > 选项卡

4种超酷Tabs选项卡设计效果

分类：选项卡日期：2024-05-14 点击(4) 评论(0)

4种超酷Tabs选项卡设计效果

简介

##### 使用方法
每一个选项卡都对应一个单独的样式文件，需要那种类型的选项卡就引入对应的CSS文件。另外特效中使用jQuery来控制用户和选项卡的交互动作。

```html
<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元素来制作。

```html
<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。

```html
$(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');
 
    });
 
});
```

web299.com

4种超酷Tabs选项卡设计效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果