JavaScript:逐层分段显示内容,隐藏显示层
最近用WordPress帮公司做了个新产品的网站,其中有些文章需要逐层分段显示和显示/隐藏层的简单效果,都用JavaScript将其实现,这里拿来分享一下,js高手可绕行。
JavaScript实现逐层分段显示内容
JavaScript代码
<script language="javascript">
var curr = 0;
function $(id){
return document.getElementById(id);
}
function showNextSection(){
var currSec = $('sec_' + curr);
var next = currSec.getAttribute('name');
var nextSec = $('sec_' + next);
if(nextSec){
// 设置段落为可见
nextSec.style.display = 'block';
// 若为最后一个段落,则隐藏按钮
if(nextSec.getAttribute('name') == null)
$('nextButton').style.display = 'none';
curr = next;
}
}
</script>
HTML内容
<div id="sec_0" name="1" class="section">
<!-- 段落内容1 -->
第一场比赛<br> 荷兰 1 : 0 日本
</div>
<div id="sec_1" name="2" class="section init-hidden">
<!-- 段落内容2 -->
第二场比赛<br> 加纳 1 : 1 澳大利亚
</div>
<div id="sec_2" name="3" class="section init-hidden">
<!-- 段落内容3 -->
第三场比赛<br> 喀麦隆 1 : 2 丹麦
</div>
<div id="sec_3" class="section init-hidden">
<!-- 段落内容4 -->
最新比赛敬请期待......<br> 斯洛伐克 vs. 巴拉圭 - 6月20日 下午1:30
</div>
<a id="nextButton" onClick="showNextSection(); return false;" href="#">显示下一段</a>
CSS样式
<style type="text/css">
.section{border:1px dotted #CCCCCC; margin-bottom:5px; padding:10px;}
.init-hidden{ display:none; }
#nextButton{ background:#FF0000; margin:5px; padding:5px; color:#FFFFFF
</style>
效果预览 | 下载请网页另存为
JavaScript实现隐藏显示层
JavaScript代码
<script language="javascript">
function showwords()
{
if(document.getElementById("hidewords").style.display=="none")
{document.getElementById("hidewords").style.display="";}
else
{document.getElementById("hidewords").style.display="none";}
}
</script>
HTML内容
<div id="hidewords" style="display:none; ">
斯洛伐克 vs. 巴拉圭 - 6月20日 下午1:30 <br />
意大利 vs. 新西兰 - 6月20日 下午4:00 <br />
巴西 vs. 科特迪瓦 - 6月20日 下午8:30
</div>
<a href="javascript:showwords()" id="button">点击显示/隐藏赛场 </a>
效果预览 | 下载请网页另存为
5 条留言 我要留言
1 楼 huangjun | 2010-06-22 at 4:17 下午
用wordpress做网站啊,
2 楼 Mars Lau | 2010-06-23 at 3:22 下午
嗯,等相关资料和政策更加完善即可上线,届时与大家分享一下成果
3 楼 边角一尘 | 2010-06-24 at 3:58 下午
现在好多用wordpress做企业网站的,又发现了一个
4 楼 边角一尘 | 2010-06-24 at 4:00 下午
隐藏的完全可以看懂
逐层分段有点疑惑
5 楼 ostbp | 2010-07-19 at 5:18 下午
不错的效果 以后我也有可能用到 先收藏了 免得到时候到处找 我是JS菜鸟一只
请 登陆 评论