利用innerHTML实现隐显效果-两种实现方法

        最近对JavaScript非常感兴趣,可能因为是它和JAVA差不多吧。原来看到一些网页上的隐显效果,心理面真是佩服,心想自己能够做就爽了。现在对innerHTML有一点的了解,做这个东西就相对简单了,下面就是我自己弄来玩的一个例子,我相信你看了过后,如果你原来也没有做过,那我保证你说“原来这么简单!!!”:

        这里要补充说明一点,就是不同的浏览器对Javascript的支持不同,我这里用了FireFox和微软的浏览器比较了一下,有些能够在微软的浏览器实现效果下,在FireFox下不一能够实现。

<html>
<head>
<title>
</title>
<script>
//这种方式是通过显示条件判定来决定innerHTML的显示内容
//这里显示的内容是原来不存在的。这个方法只支持微软的浏览器
function tClick(id)
{
 var str=''; 
 if(id==1)
 {
  str='<a href=# οnclick=t(2)><--</a>';
  str+='<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
  str+='1、你好';
  str+='<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
  str+='2、欢迎光临';
 }
 else
 {
  str='<a href=# οnclick=t(1)>--></a>';
 }
 window.testClick.innerHTML=str;
}
//这种方式通过条件确定,是否把已经存在的东西显示出来。FireFox可以支持该方法,为了程序的移植性,最好选用这一种方式。
function hello(obj,idStr)
{
 var d=document.getElementById(idStr);
 if(d.style.display=='none')
 {
  d.style.display='block';
  obj.innerHTML='回去';
 }
 else
 {
  d.style.display='none';
  obj.innerHTML='出来';
 }
}
</script>
</head>
<body>
<table>
<tr>
<td id=testClick>
 <a href=# οnclick=tClick(1)>--></a>
</td>
</tr>
<tr>
<td>
 <a href=# οnclick=hello(this,'helloddd')>出来</a>
 <dd id=helloddd style=display:none>
  你好
 </dd>
</td>
</tr>
</body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值