展开收缩标签已经有人做了，但这个不太一样，它既可以单独控制每个标签展开收缩，也可以同时控制所有的标签展开收缩，比较灵活，想换换花样的，可以试试这个。具体效果可以看这里。
实现方法：
1：备份模板
2：在<head></head>间添加下列代码，以引用脚本文件（其中的脚本文件建议自己保存并上传到自己的网络硬盘里）<script src='http://bryant0315.googlepages.com/SwitchContent.js' type='text/javascript'/>这个脚本里有两个图标:
，地址可以换成你们自己的
3：添加一个css控制标签的样式，具体样子自己可以随意定制.showstate{ /*Definition for state toggling image */4： 保存模版
cursor:hand;
cursor:pointer;
float: right;
margin-top: 2px;
margin-right: 3px;
}
.headers{
width: 400px;
font-size: 120%;
font-weight: bold;
border: 1px solid black;
background-color: lightyellow;
}
.switchcontent{
width: 400px;
border: 1px solid black;
border-top-width: 0;
}
我这里只是简单举个例子，添加一个widget，里面放置三个标签，你们可以把它用于侧边栏的各个标签，以实现展开收缩。
5：添加widget，加入下列代码<div style="margin-bottom: 5px"><a href="javascript:sweeptoggle('contract')">Contract All</a> <a href="javascript:sweeptoggle('expand')">Expand All</a></div>
<div class="headers"><img src="http://bryant0315.googlepages.com/minus.gif" class="showstate" onClick="expandcontent(this, 'sc1')" />What is JavaScript?</div>
<div id="sc1" class="switchcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>
<br />
<div class="headers"><img src="http://bryant0315.googlepages.com/minus.gif" class="showstate" onClick="expandcontent(this, 'sc2')" />Difference betwen Java & JavaScript?</div>
<div id="sc2" class="switchcontent">
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
</div>
<br />
<table border="0" cellspacing="0" cellpadding="0">
<tr><td class="headers"><img src="http://bryant0315.googlepages.com/minus.gif" class="showstate" onClick="expandcontent(this, 'sc3')" />What is DHTML? (table example)</td></tr>
<tr><td id="sc3" class="switchcontent">DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.</td></tr>
</table>
6 ：保存
注意：1:widget 里面红色标示的地方要特别注意，它是每个标签的ID，名字可以随便取，但是每个标签里的ID一定要相互对应，按钮的ID一定要和展开内容的ID相同。
2:标签里的第一div里是要显示的内容，比如标题，第二个div里是你要隐藏的内容
这个Hack还是很实用的，它可以让浏览者选择自己想看的，还可以节省空间。如果有什么需要改进的，请批评指出。
CSS精彩实例(三)——展开收缩标签
|
标签：
CSS
|
订阅：
博文评论 (Atom)
0 评论:
发表评论