通过JS实现点击按钮显示或隐藏DIV中的内容

2019-03-08 network gramer 点击: 评论
效果演示:实例代码:<!DOCTYPE html PUBLIC "- W3C DTD XHTML 1 0 Transitional EN" "http: www w3 org TR xhtml1 DTD xht

天晟网络 小编在整理编程教程 > JavaScript > 看到通过JS实现点击按钮显示或隐藏DIV中的内容,下面是小编47为您找到的38071相关内容,希望47对您有帮助。

效果演示:

通过JS实现点击按钮显示或隐藏DIV中的内容
通过JS实现点击按钮显示或隐藏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-免费教程 </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> 欢迎访问免费教程 (WWW.timsion.com)网站! </p>
  <p> 免费教程 为您提供DEDECMS、帝国CMS、PHPCMS、DISCUZ、ECSHOP、WORDPRESS等各种内容管理、论坛、商城系统的教程及模板,在这里您一定能找到想要学习的知识! </p>
  <div id="btnshow" style="display: none;">
    <p> 如有建站、仿站、模板修改、技术咨询等需求请加 QQ:464696980 详谈! </p>
    <p> 我们是一个拥有多年建站经验的团队! </p>
  </div>
</div>
<p class="slide"> <a href="javascript:divShow();" id="btnhref" class="btn-slide">查看更多</a> </p>
</body>
</html>

注意:
拷贝本文实例代码时,请将红色部分的“:”修改为英文状态下的":"

转载文章请标明来自天晟网 Timsion.Com > 编程教程 > JavaScript >
标题:通过JS实现点击按钮显示或隐藏DIV中的内容
网址:http://www.timsion.com/javas/38071.html

关键词:隐藏DIV 点击按钮

上一篇:Javascript获取服务器时间代码实例
下一篇:最后一页

免责声明:以上内容来自互联网和用户投稿,不代表本站的观点和立场,版权归原作者所有,如有侵权,请与我们联系。