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

最新推荐文章于 2022-11-26 20:09:17 发布

冯立彬

最新推荐文章于 2022-11-26 20:09:17 发布

阅读量9.4k

点赞数

分类专栏： JavaScript 文章标签： firefox javascript 浏览器 function 微软 table

本文链接：https://blog.csdn.net/fenglibing/article/details/1701197

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

最近对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>      ';
  str+='1、你好';
  str+='<br>      ';
  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
评论
利用innerHTML实现隐显效果-两种实现方法

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

扫一扫

专栏目录