JavaScript:逐层分段显示内容,隐藏显示层

PHPABC JavaScript 1,264 次浏览 , , 没有评论

最近用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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go