這里我們要實(shí)現(xiàn)的是一個(gè)，可折疊面板，效果如圖所示：

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

連續(xù)插入幾個(gè)這樣的面板，就會(huì)出現(xiàn)多個(gè)可折疊面板了

要做到如圖這種效果首先我們要準(zhǔn)備四個(gè)背景圖片：

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

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

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

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

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

這里是最基礎(chǔ)的設(shè)置

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

這里對(duì)于span的設(shè)置，是利用的滑動(dòng)門(mén)技術(shù)HTML代碼中添加了標(biāo)簽如下：

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

其他幾個(gè)同樣設(shè)置

.TabbedPanelsTabHover{
background:url(../1.gif);
color:#900;
}
.TabbedPanelsTabHover span{
display:block;
background:url(../1.gif) right top;
padding:7px 25px 7px 0;
}

設(shè)置鼠標(biāo)經(jīng)過(guò)時(shí)候的效果

.TabbedPanelsTabSelected {
background:url(../3.gif);
color:#900;
}
.TabbedPanelsTabSelected span{
display:block;
background:url(../3.gif) right top;
padding:7px 25px 7px 0;
}

設(shè)置點(diǎn)選以后的效果

其他沒(méi)有提到過(guò)的地方，就照原樣不動(dòng)。到這里我們就可以實(shí)現(xiàn)最終的效果了。

總結(jié)

以上是生活随笔為你收集整理的spry可折叠面板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。