欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 程序代码 > JS实现点击按钮显示或隐藏DIV内容
这篇文章主要为大家详细介绍了JS实现点击按钮显示或隐藏DIV内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

JS实现点击按钮显示或隐藏DIV内容,这是一种常用的效果,我们先来看看大概效果,如下图:

JS实现点击按钮显示或隐藏DIV内容

JS实现点击按钮显示或隐藏DIV内容一

JS实现点击按钮显示或隐藏DIV内容

JS实现点击按钮显示或隐藏DIV内容二

通过上面的2张图片,大家应该可以看出通过点击可以把隐藏在DIV里的内容显示出来,再次点击又隐藏起来,具体的代码如下:

<!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>通过JS实现点击按钮显示或隐藏DIV中的内容-Javascript-361模板网</title>
<style type="text/css">
.body {
    margin: 0 auto;
}
.box {
    width: 600px;
    height: auto;
    font-size: 14px;
    background-color: #ccc;
    display: block;
    padding: 10px;
    margin: 0 auto;
    border-radius: 10px;
}
.slide {
    margin: 0 auto;
    padding: 0;
    width: 600px;
}
.btn-slide {
    background-color: #ccc;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 0 auto;
    border-radius: 5px;
    margin: 10px auto;
    display: block;
}
</style>
<script type="text/javascript">
function divShow(){
document.getElementById("btnshow").style.display="block";
document.getElementById("btnhref").innerHTML ="隐藏";
document.getElementById("btnhref").href ="javascript:divhidden()";
}
function divhidden(){
document.getElementById("btnshow").style.display="none";
document.getElementById("btnhref").innerHTML ="查看更多";
document.getElementById("btnhref").href ="javascript:divShow()";
}
</script>
</head>
<body>
<div class="box">
  <h2>通过JS实现点击按钮显示或隐藏DIV中的内容</h2>
  <hr />
  <p> 欢迎访问361模板网(WWW.KE361.COM)网站! </p>
  <p> 361模板网为您提供DEDECMS、帝国CMS、PHPCMS、DISCUZ、ECSHOP、WORDPRESS等各种内容管理、论坛、商城系统的教程及模板,在这里您一定能找到想要学习的知识! </p>
  <div id="btnshow" style="display: none;">
    <p> 如有建站、仿站、模板修改、技术咨询等需求请加 QQ:64882881 详谈! </p>
    <p> 我们是一个拥有多年建站经验的团队! </p>
  </div>
</div>
<p class="slide"> <a href="javascript:divShow();" id="btnhref" class="btn-slide">查看更多</a> </p>
</body>
</html>

查看演示效果

以上就是JS实现点击按钮显示或隐藏DIV内容的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: JS 隐藏层

上一篇CSS实现table表格tr单双行颜色相间而不同

下一篇PHP中POST传值传文件大于8M报错的解决办法

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在