当前位置:主页 > 网页特效 > TAB标签 >

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

发布时间:2018/07/07 来源:互联网 浏览: 关键词:选项卡 tab 
4种超酷Tabs选项卡设计效果 4种超酷Tabs选项卡设计效果
阿里云

简要教程

这是一组非常实用的Tabs选项卡设计效果。这组选项卡同4之后效果,分别为基本选项卡,彩色带图标的选项卡,下划线样式选项卡和垂直选项卡。这些选项卡样式简洁大方,兼容IE8,非常实用。

使用方法

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

<linkrel="stylesheet"type="text/css"href="css/tabs-basic.css">          
<linkrel="stylesheet"type="text/css"href="css/tabs-colorful.css">          
<linkrel="stylesheet"type="text/css"href="css/tabs-underlined.css">          
<linkrel="stylesheet"type="text/css"href="css/tabs-vertical.css">          
<scripttype="text/javascript"src="src/jquery.min.js"></script>  

HTML结构

这些选项卡的HTML结构基本类似:使用一个<div>作为容器,选项卡的分页使用无序列表来制作,内容页则使用嵌套的<div>元素来制作。

<divclass="tabs-basic">
  <-- 分页标签 -->
  <ul>
      <li>
          <aclass="tab-active"data-index="0"href="#">First tab</a>
      </li>
      <li>
          <adata-index="1"href="#">Second tab</a>
      </li>
      <li>
          <adata-index="2"href="#">Third tab</a>
      </li>
  </ul>
  <!-- 内容页 -->
  <divclass="tabs-content-placeholder">
 
      <divclass="tab-content-active">
          <p>......</p>
          <imgsrc="assets/images/1.jpg"alt="Banhoff">
      </div>
 
      <div>
          <p>......</p>
          <imgsrc="assets/images/2.jpg"alt="Colosseum">
      </div>
 
      <div>
          <p>......</p>
          <imgsrc="assets/images/3.jpg"alt="Sands of Life">
      </div>
 
  </div>
</div>

JavaScript

这些Tabs选项卡使用jQuery来完成用户的交互动作,实现方法非常简单,只是在用户点击相应的Tabs分页时为内容页添加和移除相应的class。

$(document).ready(function() {
 
    varwidget = $('.tabs-basic');
 
    vartabs = widget.find('ul a'),
        content = widget.find('.tabs-content-placeholder > div');
 
    tabs.on('click',function(e) {
        e.preventDefault();
        varindex = $(this).data('index');
 
        tabs.removeClass('tab-active');
        content.removeClass('tab-content-active');
 
        $(this).addClass('tab-active');
        content.eq(index).addClass('tab-content-active');
 
    });
 
});

共有人阅读,期待你的评论!评论
Top