zoukankan
html css js c++ java
JS实现的展开隐藏效果
利用JS实现展开隐藏效果:
Code
1
<
html
>
2
<
head
>
3
<
title
>
JS实现展开隐藏
</
title
>
4
<
script language
=
"
JavaScript
"
type
=
"
text/JavaScript
"
>
5
function 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;
"
>
32
id2层的内容
<
br
>
id2层的内容
<
br
>
id2层的内容
<
br
>
id2层的内容
<
br
>
id2层的内容
<
br
>
33
id2层的内容
<
br
>
id2层的内容
<
br
>
id2层的内容
<
br
>
id2层的内容
<
br
>
id2层的内容
<
br
>
34
</
div
>
35
</
body
>
36
</
head
>
37
</
html
>
38
查看全文
相关阅读:
Spring源码情操陶冶-AOP之Advice通知类解析与使用
Spring源码情操陶冶-AOP之ConfigBeanDefinitionParser解析器
TCP/IP__Cisco的3层分层模型
网际互连__冲突域和广播域
网际互连__数据包结构
网际互连__散知识点
网际互连__单播、组播、广播
网际互连__以太网端口
网际互连__以太网
网际互连__TCP/IP三次握手和四次挥手
原文地址:https://www.cnblogs.com/guanjie20/p/1410415.html
最新文章
mysql压缩备份导入导出
linux生成多对秘钥并指定秘钥登录
sql 聚合语句,count的用法
linux less命令详情
Supervisod的使用
通过http URL 获取图片流 转为字节数组
Tomcat中配置Url直接访问本地其他磁盘
Maven 打包遇到的问题
微信小程序——动态渲染页面、路径传参
微信小程序——<radio></radio>大小改变
热门文章
Java获取微信小程序二维码
java实现微信支付
Spring源码情操陶冶#task:executor解析器
Xss问题解决方案
SpringMVC源码情操陶冶-RequestMappingHandlerAdapter适配器
git使用总结
Spring Mybatis-分页插件使用
log4j源码解析-文件解析
SpringAop源码情操陶冶-JdkDynamicAopProxy
SpringAop源码情操陶冶-AspectJAwareAdvisorAutoProxyCreator
Copyright © 2011-2022 走看看