Tab选项卡

CardTabs - Tabs选项卡插件

阿里云

CardTabs 是一款简单的 jquery Tabs 选项卡插件。该 jquery Tabs 选项卡插件可以自定义主题,兼容 IE8 浏览器,而且使用简单,非常实用。

使用方法:

在页面中引入 jquery,jquery.galpop.min.js 和 jquery.cardtabs.css 文件。

也想出现在这里?联系我们
创客主机
  1. <link href="dist/jquery.cardtabs.css" rel="stylesheet">
  2. <script src="js/jquery.min.js"></script>      
  3. <script src="js/jquery.cardtabs.js"></script>

HTML 结构:

该 jquery Tab 选项卡的基本 HTML 结构如下:

  1. <div class='container'>
  2.     <div data-tab="Tab one">
  3.         /* contents of the first tab...  */
  4.     </div>
  5.     <div data-tab="Tab two">
  6.         /* contents of the second tab...  */
  7.     </div>
  8.     <div data-tab="Tab three">
  9.         /* contents of the third tab...  */
  10.     </div>
  11. </div>

初始化插件:

在页面 DOM 元素加载完毕之后,可以通过 cardTabs()方法来初始化该 jquery Tabs 选项卡插件。

  1. $('.container').cardTabs();

可以在初始化是设置为 Tab 选项卡设置主题参数。

  1. $('.container').cardTabs({'theme': 'dark'});

另外,如果想激活另一个 Tab,只需要简单的为该 tab 添加 activeclass 即可。

  1. <div class='active' data-tab="Tab two"></div>

创建自己的主题,要创建自己的 Tab 主题,你需要编写下面的一些样式,其中,yourthemename 是你给主题起的一个名称。

  1. div.card-tabs-bar.yourthemename{ /* the link bar */
  2.  
  3. }
  4.  
  5. div.card-tabs-bar.yourthemename a { /* A link in the link bar */
  6.  
  7. }
  8.  
  9. div.card-tabs-bar.yourthemename a.active  { /* The active tab link */
  10.  
  11. }
  12.  
  13. div.card-tabs-stack.yourthemename div[data-tab] { /* The shown tab itself */
  14.  
  15. }

然后在初始化时,就可以通过 theme 参数来调用自己的主题。

  1. $('.container').cardTabs({'theme': 'yourthemename'});

CardTabs jquery Tabs 选项卡插件的 github 地址为:https://github.com/blekerfeld/CardTabs

CardTabs - Tabs 选项卡插件

已有 621 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!