JavaScript 操作选中当前的li元素并给他添加select类。之前都是使用jquery写的，今天使用JavaScript写一个。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        li{cursor:pointer;}

        .select{background:pink;}

    </style>

</head>

<body>

<ul>

    <li>这是菜单1</li>

    <li>这是菜单2</li>

    <li>这是菜单3</li>

    <li>这是菜单4</li>

    <li>这是菜单5</li>

    <li>这是菜单6</li>

    <li>这是菜单7</li>

    <li>这是菜单8</li>

</ul>

</body>

</html>

<script type="text/javascript">

    window.onload = function (){

        var aLi = document.getElementsByTagName("li");

        console.log(aLi);

        var i = 0;

        for (i = 0; i < aLi.length; i++){//得到li的长度

            aLi[i].onclick = function () {

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

                    aLi[i].className = aLi[i].className.replace(/\s?select/,"");//替换select为空

                    console.log(aLi[i]);

                }

                this.className += "select";//添加select类

            };

        }

    };

</script>

运行结果：

aaarticlea/png;base64,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" alt="" />

JavaScript 操作选中当前的li元素并给他添加select类的更多相关文章

  1. 笔记：javascript操作iframe内的DOM元素，及调用iframe内的方法

    iframe相当于一个嵌入在网页内的浏览器,它与当前网页是隔离的. 但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法. 在网页内操作DOM元素,是使用d ...

  2. day35—JavaScript操作元素（创建、删除）

    转行学开发,代码100天——2018-04-20 JavaScript对DOM元素的创建.删除操作. 1.创建DOM元素 appendChild方法 createElement(ochild); op ...

  3. Python javascript操作DOM

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  4. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

  5. 使用javaScript操作页面元素

    from selenium import webdriver import time import unittest from selenium.common.exceptions import We ...

  6. JavaScript 操作DOM对象

    1)JavaScript  操作DOM對象 1.DOM:是Document  Object  Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...

  7. JavaScript操作DOM的那些坑

    js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”. DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响 ...

  8. jQuery基础学习5——JavaScript方法获取页面中的元素

    给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  9. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

随机推荐

  1. raid概述与CentOS7.4中raid5的搭建与测试

    前言 一.raid的定义与作用 raid(独立冗余磁盘阵列).raid技术通过把多个硬盘设备组合成一个容量更大的,安全性更好的磁盘阵列.把数据切割成许多区段后分别放在不同的物理磁盘上,然后利用分散读写 ...

  2. http协议中的状态码（status code），超文本传输协议状态码

    HTTP协议,又叫超文本传输协议. 在项目的开发过程中,前后端交互,这个用的是最多的,在后端给我的的接口调用时,我们往往先查看这个协议的状态码,状态码正常了,才进一步去看我们从后太拿的数据,是否为我们 ...

  3. 【路由和交换之H3C自导自演】

    H3C配置自导自演 显示和维护及恢复 1:display display history-command    :查看历史命令记录 display diagnostic-information :查看 ...

  4. Linux : centOS 与 Ubuntu 安装 Nginx

    源码下载: wget http://nginx.org/download/nginx-1.14.0.tar.gz 解压:tar –zxvf xxx 安装依赖: yum -y install  open ...

  5. vi-vim常用命令

    vi-vim常用命令 1 简介 在UNIX系统中,创建和修改配置文件.shell脚本.初始化文件.编写程序都离不开VI. 1      vi[1]属于两个主要的UNIX规范:POSIX和单一UNIX规 ...

  6. django之多表查询

    一.创建模型 在Models创建如下模型: from django.db import models # Create your models here. # 用了OneToOneField和Fore ...

  7. vue---day03

    1. Vue的生命周期 - 创建和销毁的时候可以做一些我们自己的事情 - beforeCreated - created - beforeMount - mounted - beforeUpdate ...

  8. Element-ui学习使用

    这是我使用Element-ui的布局,排布的一个界面,原本我是使用WinfowsForm来做的一个摄像头注册以及查询的小工具,目前我关注前后端的开发,所以就想着能不能把这么个小工具,我用前后端的形式开 ...

  9. JAVA多进程入门

    概念 并行和并发 并行:物理上的实现,在同一时间点上发生 并发:两个事件在一个时间段内发生,如单片机的单核多线程 进程和线程 进程:一个应用程序可以有多个进程,每一个进程有一个独立的内存空间 线程:一 ...

  10. Android面试收集录 数据库

    1.SQLite数据库如何查询表table1的第20条到30条记录? select * from table1 limit 19,11   ==>从19开始,11个数据 2.如何才能将table ...