JavaScript 设置列表选项(li)可删除

  • 时间:2018-07-02 22:47 作者:程序员小新人学习 来源:程序员小新人学习 阅读:320
  • 扫一扫,手机访问
摘要:以下实例我们演示了如何用 JavaScript 来关闭列表选项:HTML 代码 Adele Agnesx Billyx Bobx Calvinx Christinax CindyCSS 代码* { box-sizing: border-box;}/* 列表 */ul { list-style-typ

以下实例我们演示了如何用 JavaScript 来关闭列表选项:

HTML 代码

  • Adele
  • Agnesx
  • Billyx
  • Bobx
  • Calvinx
  • Christinax
  • Cindy

CSS 代码

* {

box-sizing: border-box;

}

/* 列表 */

ul {

list-style-type: none;

padding: 0;

margin: 0;

}

/* 列表选项样式 */

ul li {

border: 1px solid #ddd;

margin-top: -1px; /* Prevent double borders */

background-color: #f6f6f6;

padding: 12px;

text-decoration: none;

font-size: 18px;

color: black;

display: block;

position: relative;

}

/* 鼠标移动过去后增加灰色背景 */

ul li:hover {

background-color: #eee;

}

/* 设置关闭按钮 */

.close {

cursor: pointer;

position: absolute;

top: 50%;

right: 0%;

padding: 12px 16px;

transform: translate(0%, -50%);

}

.close:hover {background: #bbb;}

HTML 代码

/* 取得 class="close" 的所有元素 */

var closebtns = document.getElementsByClassName("close");

var i;

/* 循环元素,在点击时关闭它 */

for (i = 0; i < closebtns.length; i++) {

closebtns[i].addEventListener("click", function() {

this.parentElement.style.display = 'none';

});

}

JavaScript 设置列表选项(li)可删除

  • 全部评论(0)
最新发布的资讯信息
【系统环境|windows】Axios 取消重复请求(2020-11-08 07:00)
【系统环境|windows】熬了一晚上,小白用Python写了一个股票提示系统(2020-11-08 07:00)
【系统环境|windows】2020要想成为一名专业的web前台开发程序员,需要学习什么?(2020-11-08 06:35)
【系统环境|windows】前台面试每日 3+1 —— 第546天(2020-11-08 06:34)
【系统环境|windows】聊聊前台工程师的职业发展 (纯干货)(2020-11-08 06:34)
【系统环境|windows】浅谈OAuth 2.0基本原理(2020-11-08 06:34)
【系统环境|windows】程序员初入职场避坑指南(2020-11-08 06:34)
【系统环境|windows】python的绘图利器--海龟绘图turtle(2020-11-08 06:33)
【系统环境|windows】pyinstaller打包结果瘦身(2020-11-08 06:33)
【系统环境|windows】前台面试每日 3+1 —— 第518天(2020-11-08 06:33)
血鸟云
手机二维码手机访问领取大礼包
返回顶部