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 ...
随机推荐
- 绘图matplotlib
前言 matplotlib是python的一个绘图库,如果你没有绘制过图,可以先试试js的绘图库http://www.runoob.com/highcharts/highcharts-line-lab ...
- SurfaceView的基本使用(转)
转自:https://www.cnblogs.com/zhangyingai/p/7087371.html SurfaceView的基本使用 一.引入: Android提供了View来进行绘图处理 ...
- jQuery实现网页放大镜功能 转载
京东等电商网站中可以对商品进行放大观察,本文要实现的就是模仿这个放大镜功能,大致效果如下图所示: 简要说明实现思路: 1.原图窗口与放大窗口插入的是同一个图片,不过原图窗口的图片要适当缩小,放大窗口图 ...
- 【串线篇】MVC与SpringMVC
1.二者区分 MVC: SpringMvc: DispatcherServlet(前端控制器名) 2.springmvc思想 Spring MVC 通过一套 MVC 注解,让 POJO成为处理请求的控 ...
- python 网络编程:socket(二)
上节地址:Python网络编程:socket 一.send和sendall区别 send,sendall ret = send('safagsgdsegsdgew') #send 发送 ...
- linux之-mysql数据库约束3
在MySQL中,通常有这几种约束: DROP DATABASE mysql_shiyan;删除数据库 主键 (PRIMARY KEY)是用于约束表中的一行,作为这一行的唯一标识符,在一张表中通过主键就 ...
- 1.zabbix编译安装(环境lnmp)
zabbix服务端安装 1.使用脚本安装.脚本内容如下.安装完用http://192.168.159.20/zabbix #!/bin/bash #使用说明,此版本是针对程序安装路径不在/opt/下的 ...
- 使用struts2未登录,不能操作
1.定义拦截器类: 注意登录的action,登录成功在session存入标记(login) import com.opensymphony.xwork2.ActionContext; import c ...
- 原生js实现拖拽效果
面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...
- oracle服务端导出/导入方式expdp/impdp
1. expdp导出步骤 1.1 用sys管理员登录sqlplus [root@hxjk_test_mysql_redis_file oracle]# sqlplus SQL*Plus: Releas ...