本例我们想最终实现的效果，如图所示，单击某个Tab时，就会切到该页面。
首先我们新建一个HTML文档，然后在“插入”工具栏中选择“spry”项目。单击如图所示，这时视图窗口就会出现一个最基本的Tab面板了
右数第四个。
下面的任务就是以spry为基础，通过CSS样式的设置，实现更为美观的Tab面板。也可以根据自己希望得设计更美观的效果
这里我们要用到的3个图像如图所示
下面我们要找到自动生成的css文档，不改动其中的名称，在其基础上进行修改就可以了
这里还说明了，鼠标经过时变换面板的javascript代码。修改后的CSS样式如下：
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
500px;
}
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;//这一段没有影响，可以不改动
}
设置初始状态时，因为运用了滑动门，说以多了一个span标签
.TabbedPanelsTab {
display:block;
height:30px;
position: relative;
top: 2px;
float: left;
padding:0px 0px 0px 15px;
margin:0;
font: bold 14px Arial;
background:url(../2.gif);
list-style: none;
cursor:pointer;
-moz-user-select: none;
-khtml-user-select: none;
color:#fff;
}
.TabbedPanelsTab span{
display:block;
background:url(../2.gif) right top;
padding:7px 25px 7px 0;
}
设置鼠标经过时
.TabbedPanelsTabHover{
background:url(../1.gif);
color:#900;
}
.TabbedPanelsTabHover span{
display:block;
background:url(../1.gif) right top;
padding:7px 25px 7px 0;
}
设置选择时
.TabbedPanelsTabSelected {
background:url(../3.gif);
color:#900;
}
.TabbedPanelsTabSelected span{
display:block;
background:url(../3.gif) right top;
padding:7px 25px 7px 0;
}
其他没有影响可以不动
这里把视线鼠标经过的HTML部分也贴出来，读者可以看一下
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(0)"><span>Home</span></li>
<li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(2)"><span>Web Dev</span></li>
<li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(3)"><span>Web Design</span></li>
<li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(4)"><span>Map</span></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<p>我拿什么拯救</p>
<p> </p>
</div>
<div class="TabbedPanelsContent">
<p>就这样被你征服</p>
<p> </p>
</div>
<div class="TabbedPanelsContent">
<p>想留不能留才最寂寞</p>
<p> </p>
</div>
<div class="TabbedPanelsContent">
<p>没说完温柔只剩离歌</p>
<p> </p>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
实现这一效果的主要代码是
，至此本列就算完成了。