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>

效果预览 | 下载请网页另存为

本文链接: JavaScript:逐层分段显示内容,隐藏显示层     本文作者:Mars Lau

转载请以链接形式注明原始出处和作者,“心情日志”文章谢绝转载!

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菜鸟一只

支持Gravatar头像,想要一个Gravatar个性头像?可以到这里申请一个

登陆 评论