js实现点击按钮控制展开与收起.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉与收起</title>
<link rel="stylesheet" href="css/showhide.css" />
<script type="text/javascript" src="js/showhide.js" ></script>
</head>
<body>
<div id="showhide">
<p>假如生活欺骗了你</p>
<p>不要悲伤,不要哭泣</p>
<p>忧郁的日子总会过去的</p>
<div id="show" style="display:none;">
<p>
因为你要知道,再挣扎也是没用的,它还是会再欺骗你一次
</p> <p>
直至你在失望与孤独中死去
</p>
</div> </div>
<p class="slide">
<a href="javascript:showdiv();" id="strHref" class="btn-slide">更多选项+
</a>
</p> </body>
</html>
css
body
{
margin: 0 auto;
padding: 0;
}
a:focus
{
outline: none;
}
#showhide
{
background: black;
color: white;
width: 600px;
display: block;
margin: 0 auto;
padding: 5px;
font-size: 20px; height: auto;
font-family: "微软雅黑";
}
.slide
{
margin: 0;
padding: 0;
width: 600px;
border-top: solid 4px gray;
margin: 0 auto;
}
.btn-slide
{
background: gray;
text-align: center;
width: 120px;
height: 30px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
color: #fff;
text-decoration: none;
}
js
function showdiv() {
document.getElementById("show").style.display = "block"; document.getElementById('strHref').innerHTML="收起";
document.getElementById('strHref').href="javascript:hidediv();";
}
function hidediv() {
document.getElementById('show').style.display='none';
document.getElementById('strHref').innerHTML="更多选项+";
document.getElementById('strHref').href="javascript:showdiv();";
}
效果;
js实现点击按钮控制展开与收起.的更多相关文章
- js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
- js实现点击按钮传值
js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
- 使用js实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...
- 原生 js 实现点击按钮复制文本
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
- JS实现点击按钮,下载文件
PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦.excel啦都是一样) 有两 ...
- 鼠标点击按钮控制图片移动或者键盘控制图片移动(解决问题:parseInt失效问题,用Number)
在测试用鼠标点击按钮,使图片左右上下移动: 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
- 原生JS 实现点击按钮创建元素
要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外 思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小 ...
- js实现点击按钮弹出上传文件的窗口
转自:https://www.jb51.net/article/100916.htm 1.详细描述 在页面上设置一个“选择文件”按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 ? 1 2 ...
- js实现点击按钮实现上一张下一张相册滚动效果
/****判断图片是否构成滚动效果*/$(function(){ if($("#bar").find('img').size()*71<=$("#bar&qu ...
随机推荐
- XML 和 HTML 之间的差异
XML 和 HTML 为不同的目的而设计: XML 被设计用来传输和存储数据,其焦点是数据的内容. HTML 被设计用来显示数据,其焦点是数据的外观. HTML 旨在显示信息,而 XML 旨在存储和传 ...
- Kaggle数据集下载
Kaggle数据集下载步骤: 安装Kaggle库: 注册Kaggle账户: 找到数据集,接受rules: 在My Account>>API中,点击Create New API Token, ...
- python print 连续输出变量加字符串
a=1 b=2 print(a,'+',b,'=',a+b) 输出:1+2=3
- eclipse设置tomcat部署目录地址
参考: https://blog.csdn.net/lvyuan1234/article/details/53418818 右键,open 操作前提是所有项目移除,并且右键clean掉相关数据! 修改 ...
- 理解Java的Class类、"this."关键字、Constructor构造器(一)
import java.util.*; public class BookTest { public static void main(String[] args) { //Book book = n ...
- gene network analysis
基因表达分析包括3个层次[68], 首先是单基因水平, 即比较对照组与实验组的每个基因是否存在表达差异, 这主要指差异基因表达分析; 其次是多基因水平, 如按照基因的共同功能.相互作用.共同表达等 ...
- shell 提取文件的某行,并在行尾添加字符
sed -n '100,200p' file.txt #提取文件file.txt第100行到第200行的内容 sed 's/$/test/' file.txt #在行尾添加字符串test,$代表行尾
- vue 前后端分离 接口及result规范 及drf安装使用方法
接口 # 接口:url链接,通过向链接发送不同的类型请求与参数得到相应的响应数据# 1.在视图层书写处理请求的 视图函数# 2.在路由层为视图函数配置 url链接 => 产生接口# 3.前台通 ...
- 【Flutter学习】组件学习之目录
01. Flutter组件-Layout-Container-容器 02. Flutter组件-Text-Text-文本 03. Flutter组件-Text-RichText-富文本 04. ...
- Network基础(三):网线的制作、交换机基本命令模式、交换机命令行基本配置、交换机的密码设置
一.网线的制作 目标: 在常见的计算机网络中,网线主要用来连接计算机与交换机(或宽带路由器).交换机与交换机.交换机与路由器,以及需要连网的其他各种设备.网线的制作与测试是作为网络管理员的一个入门技能 ...