利用innerHTML實現隱顯效果-兩種實現方法
阿新 • • 發佈：2019-02-02
最近對JavaScript非常感興趣，可能因為是它和JAVA差不多吧。原來看到一些網頁上的隱顯效果，心理面真是佩服，心想自己能夠做就爽了。現在對innerHTML有一點的瞭解，做這個東西就相對簡單了，下面就是我自己弄來玩的一個例子，我相信你看了過後，如果你原來也沒有做過，那我保證你說“原來這麼簡單！！！”：
這裡要補充說明一點，就是不同的瀏覽器對Javascript的支援不同，我這裡用了FireFox和微軟的瀏覽器比較了一下，有些能夠在微軟的瀏覽器實現效果下，在FireFox下不一能夠實現。
<html>
<head>
<title>
</title>
<script>
//這種方式是通過顯示條件判定來決定innerHTML的顯示內容
//這裡顯示的內容是原來不存在的。這個方法只支援微軟的瀏覽器
function tClick(id)
{
var str='';
if(id==1)
{
str='<a href=# onclick=t(2)><--</a>';
str+='<br> ';
str+='1、你好';
str+='<br> ';
str+='2、歡迎光臨';
}
else
{
str='<a href=# onclick=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=# onclick=tClick(1)>--></a>
</td>
</tr>
<tr>
<td>
<a href=# onclick=hello(this,'helloddd')>出來</a>
<dd id=helloddd style=display:none>
你好
</dd>
</td>
</tr>
</body>
</html>