當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS实现的展开隐藏效果
生活随笔
收集整理的這篇文章主要介紹了
JS实现的展开隐藏效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
利用JS實現(xiàn)展開隱藏效果:
?1<html>
?2<head>
?3<title>JS實現(xiàn)展開隱藏</title>
?4<script?language="JavaScript"?type="text/JavaScript">
?5function?showhidediv(id){
?6??try{
?7
?8????var?id1=document.getElementById(id);
?9?id3.value="收縮";
10????if(id1)
11?{
12?if(id2.style.display=='block')
13?{
14?id2.style.display='none';
15?id3.value="展開";
16?}
17?else
18?{
19?id2.style.display='block';
20?}
21?}
22?}
23?catch(e){}
24?}
25</script>
26<body>
27<div?id="id1">
28<!--
29<div?onclick='showhidediv("id1");'?style="color:red;">點擊標題</div>-->
30<input?type="button"?value="展開"?onclick='showhidediv("id1");'?id="id3"?style="background-color:white;">
31<div?id="id2"?style="display:none;">
32id2層的內(nèi)容<br>id2層的內(nèi)容<br>id2層的內(nèi)容<br>id2層的內(nèi)容<br>id2層的內(nèi)容<br>
33id2層的內(nèi)容<br>id2層的內(nèi)容<br>id2層的內(nèi)容<br>id2層的內(nèi)容<br>id2層的內(nèi)容<br>
34</div>
35</body>
36</head>
37</html>
38
總結(jié)
以上是生活随笔為你收集整理的JS实现的展开隐藏效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Fedora 11-Alpha试用手记
- 下一篇： Java EE WEB工程师培训-JDB