這里我們要實現的是一個，可折疊面板，效果如圖所示：

首先我們建立一個HTML文件，保存后，在工具欄找到折疊面板,如圖所示：

連續插入幾個這樣的面板，就會出現多個可折疊面板了

要做到如圖這種效果首先我們要準備四個背景圖片：

首先我們來研究一下HTML代碼，這里也需要JavaScript文件和css文件。

<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />

然后我們只需要在原有的CSS基礎上去改變它的樣式表就行了

下面是修改以后的CSS代碼，這里就不一一說明了

.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
500px;
}

這里是最基礎的設置

.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;
}

這里對于span的設置，是利用的滑動門技術HTML代碼中添加了標簽如下：

<div class="AccordionPanelTab"><span>Web Dev</span></div>

其他幾個同樣設置

.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;
}

設置點選以后的效果

其他沒有提到過的地方，就照原樣不動。到這里我們就可以實現最終的效果了。

總結

以上是生活随笔為你收集整理的spry可折叠面板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。