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';
// 若为{zh1}一个段落，则隐藏按钮
if(nextSec.getAttribute('name') == null)
$('nextButton').style.display = 'none';
curr = next;
}
}
</script>

HTML内容

<div id="sec_0" name="1" class="section">
<!-- 段落内容1 -->
{dy}场比赛<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 -->
{zx1}比赛敬请期待......<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>

| 下载请网页另存为