夏易网络

您的当前位置:首页 > 新闻动态 > 网站建设学堂 >

js点击打开再点关闭或html弹出div示例代码

2021-01-26 02:12:03   来源:夏易网络   评论:0 点击:
在网页制作中经常需要点击打开或关闭的功能,尤其是手机版网站制作时都是必需的,给大家列个示例,希望对你有所帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
 
//示列1
<div><a href="javascript:void(0);" onclick="show('c')">显示隐藏,点击打开,再点关闭</a></div>
<dd id="c"  style="display:block;">js点击打开再点关闭或html弹出div示例代码</dd>
<script type="text/javascript">
function show(c){  //点击时执行以下内容
var c=document.getElementById(c); //获得id为b的容器
if(c.style.display=="block"){  //这里也就是点击后当id为c的div处于显示状态时就关闭id为c的div,反之,当id为c的div处于隐藏状态时就打开它
c.style.display="none";   
}else{
c.style.display="block";
}
}
</script>
 
<!--这个就是简单的点击一次后关闭,再次点击打开div的例子,由此还可以稍微改动下得出 处于打开状态时显示关闭按钮,处于关闭状态时显示打开按钮的例子2-->
<br /><br /><br />
 
//示列2
<div id="b"><a href="javascript:void(0);" onclick="show('a','b')"><em class="op">点击打开</em><em class="cl">再点关闭</em></a></div>
<dd id="a">js点击打开再点关闭或html弹出div示例代码</dd>
<style type="text/css">
*{ font-size:20px;}
.op{ display:block;}
.cl{ display: none;}
.on .op{ display:none;}
.on .cl{ display:block;}
#a{ display:none;}
</style>
<script type="text/javascript">
function show(a,b){
var a=document.getElementById(a); 
var b=document.getElementById(b); 
if(a.style.display=="block"){
a.style.display="none";
b.className="";
}else{
a.style.display="block";
b.className="on";
}
}
</script>
 
</body>
</html>
新闻动态
网站建设学堂
网站优化学堂
网络行业新闻
夏易网络动态
推荐文章
如何查看网站哪些图片或文件影响网站打开速度?
如何让网站打开速度更快之图片压缩
大型企业网站建设需要注意的几个问题
高端企业网站建设PK低端企业网站建设
网站SEO优化是什么意思?