建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > 网页特效 >

用于显示隐藏内容的demo

时间:2011-09-15 10:30来源: 作者: 点击:
这是一个静态网站可能用到的功能,类似于英语的完形填空,点显示答案按钮以后,可以显示答案在上面,展示如下: ————–代码————– JAVASCRIPT代码部分 <script type="text/javascript">  

这是一个静态网站可能用到的功能,类似于英语的完形填空,点显示答案按钮以后,可以显示答案在上面,展示如下:

————–代码————–
JAVASCRIPT代码部分

<script type="text/javascript">
 var hiddenOrShow = 0;
 function clickMe() {
  var div = document.getElementById('answerDiv');
  var button=document.getElementById('aButton');
  if (hiddenOrShow % 2 == 0) {
   div.style.display = "block";
   button.setAttribute("value", "Hide the answer");
  } else {
   div.style.display = "none";
   button.setAttribute("value", "Show the answer");
  }
  hiddenOrShow++;
 }
</script>

 HTML代码部分

 <a>click the button below and you can see the answer in the answer field</a>
<br />
<input id="aButton" type="button" value="Show the answer" onclick="clickMe()">
<br>
<div>
<ul>
 <li>What's my Name?</li>
 <li>
    <div>the answer is:</div>
    <div id="answerDiv" style="display: none"><a>Moper</a></div>
 </li>
</ul>
</div>

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片