如何快速制作一个带特效的选项卡

快速即能利用的就利用，利用不了的再自己写。本文案例需要软件Dreamweaver，技术css3和jQuery，操作如下：

一、用Dreamweaver建立一个规范的站点，插入spry选项卡式面板（窗口→工作区布局→经典→Spry→Spry选项卡式面板）。

ctrl+s→弹窗上点确定，之后会自动生成一根叫SpryAssets的文件夹，为方便管理，把这里面的css和js文件放到站点的对应文件夹里，并修改路径。

二、修改样式

默认的样式是非常丑的，把它改成你想要的样式，改样式之前先把默认的样式删除，即删除SpryTabbedPanels.css。

HTML代码：

css代码:

@charset "utf-8"; 
/* CSS Document */ 
* { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    font-size: 16px; 
    font-family: "微软雅黑"; 
} 
a { 
    text-decoration: none; 
} 
section { 
    width: 800px; 
    height: auto; 
    margin: auto; 
} 
#TabbedPanels1 { 
    margin-top: 20px; 
} 
ul.TabbedPanelsTabGroup { 
    width: 200px; 
    height: 40px; 
    margin: auto; 
} 
ul.TabbedPanelsTabGroup li { 
    width: 90px; 
    text-align: center; 
    line-height: 40px; 
    float: left; 
    margin: 0 5px 0 5px; 
    background-color: #39F; 
    color: #FFF; 
    cursor: pointer; 
    transition: all 0.6s; 
    -moz-transition: all 0.6s; 
    -o-transition: all 0.6s; 
    -webkit-transition: all 0.6s; 
} 
ul.TabbedPanelsTabGroup li:hover { 
    background-color: #FC0; 
} 
.TabbedPanelsContentGroup { 
    margin-top: 10px; 
    width: 798px; 
    height: 498px; 
    border: solid 1px #CCC; 
    position: relative; 
} 
.TabbedPanelsContentGroup .TabbedPanelsContent { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

菜单样式用到了css3的transition属性，内容切换用到了jQuery的fadeIn()和fadeOut()方法。需要注意的几点是js库的使用；css3属性的兼容性；内容区淡出的时间，最好不要给时间，立即淡出，淡出的过程给了时间在内容区切换时会造成重影，显得比较乱。

效果预览：https://blog.weiyiqi.net/lookdoc/spry/spry.html

我写的比较简单，本文只是展示修改默认样式的方法，内容区里面的东西你想怎么写就怎么写。