jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果

使用jquery插件tytabs.jquery.min.js可以很方便地实现带渐变效果的TAB选项卡效果，具体攻略如下：

步骤一：引入tytabs.jquery.min.js文件和相关样式文件

在页面中引入tytabs.jquery.min.js文件以及相关的样式文件，例如：

<link rel="stylesheet" href="css/tytabs.css">
<script src="js/jquery.js"></script>
<script src="js/tytabs.jquery.min.js"></script>

步骤二：定义HTML结构和添加CSS样式

在页面中定义选项卡的HTML结构和样式，例如：

<div id="tab-container">
  <ul class="tabs">
    <li><a href="#tab1">选项卡1</a></li>
    <li><a href="#tab2">选项卡2</a></li>
    <li><a href="#tab3">选项卡3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1">这是选项卡1的内容</div>
    <div id="tab2">这是选项卡2的内容</div>
    <div id="tab3">这是选项卡3的内容</div>
  </div>
</div>

然后为选项卡容器设置样式，例如：

#tab-container {
  width: 500px;
  margin: 0 auto;
}

步骤三：初始化tytabs插件

使用jQuery选择器选中选项卡容器，然后通过tytabs插件进行初始化，例如：

$(function() {
  $("#tab-container").tytabs({
    tabinit: "1",
    fadespeed: "fast"
  });
});

其中，tabinit参数指定默认选中的选项卡为第一个，fadespeed参数指定渐变速度为fast。

示例一：修改渐变颜色

tytabs支持使用CSS进行渐变颜色的修改，例如：

.tabs li a {
  background-image: -webkit-linear-gradient(#f60, #900);
  background-image: -moz-linear-gradient(#f60, #900);
  background-image: linear-gradient(#f60, #900);
}

这段CSS代码将更改选项卡的渐变颜色为#f60到#900的颜色渐变。

示例二：修改切换动画效果

tytabs支持使用CSS进行切换动画效果的修改，例如：

.tab-content > div {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  -moz-transition: opacity .4s ease-in-out;
  -webkit-transition: opacity .4s ease-in-out;
  -o-transition: opacity .4s ease-in-out;
  -ms-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out;
}
.tab-content > div.current {
  opacity: 1;
  z-index: 1;
}

这段CSS代码将选项卡切换动画效果修改为渐变效果，使用opacity属性设置渐变，使用transition属性设置渐变速度为.4s。