分类

商品

商品

店铺

资讯

热门搜索 : WordPress 织梦企业官网小说源码 Discuz

服务器低至9.9￥/月

当前位置：首页 > 资讯 > 网页前端 > CSS

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)

上一篇：jQuery 查看元素能否隐藏
下一篇：margin、border、padding属性

最新发布的资讯信息
【系统环境|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)

动风网络

店铺

血鸟云

推荐商品

资讯排行榜
更多>>

手机访问领取大礼包