借助于spry实现Tab面板

本例我们想最终实现的效果，如图所示，单击某个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部分也贴出来，读者可以看一下

<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">

</script>

实现这一效果的主要代码是

，至此本列就算完成了。