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. (第01节)IDEA快速搭建web项目

    在配置好环境,熟悉了IDEA的基本操作后,就要开始搭建WEB项目了: File——>new——>project——>然后选择Maven 点击Create from archetype ...

  2. linux命令之磁盘和文件系统操作

    1.   fdisk:磁盘分区命令 语法:fdisk [选项][参数] 命令说明:fdisk是linux系统里常用的一种磁盘管理工具,可以创建和管理系统分区 常用命令选项: -l:列出指定的并退出,没 ...

  3. TCP回话劫持原理和利用

    由于 TCP 协议并没有对 TCP 的传输包进行身份验证,所以在我们知道一个 TCP 连接中的 seq 和 ack 的信息后就可以很容易的伪造传输包,假装任意一方与另一方进行通信,我们将这一过程称为 ...

  4. js，setTimeout与setInterval的用法

    1.setTimeout与setInterval的区别 setTimeout: 1.直接使用的话,按照指定 的时间,只执行一次传入的函数参数. 2.函数的终止使用clearTimeout. setIn ...

  5. vue 数组数据更新或者对象数据更新 但是页面没有同步问题

    1,使用set函数来设置数据. 2,你可以通过 $forceUpdate 来做这件事.在数据赋值之后 就直接调用 this.$forceUpdata()

  6. （转载）jsp的内部方法jspInit(),_jspService(),jspDestroy()

    jspInit(){}:jsp Page被初始化的时候调用该方法,并且该方法仅在初始化时执行一次,所以可以在这里进行一些初始化的参数配置等一次性工作,由作者创建jspDestroy(){}:jsp P ...

  7. Asp.Net Core 生成图形验证码

    前几天有朋友问我怎么生成图片验证码,话不多说直接上代码. 支持.NET CORE开源.助力.NET Core社区发展. using System; using System.IO; using Sys ...

  8. 带你认识Xmanager

    XManager是一款小巧.便捷的浏览远端X窗口系统的工具.在工作中经常使用Xmanager来登录远端的Solaris系统,在X窗口系统上作图形化的操作.但是,Xmanager默认并不提供对于中文的支 ...

  9. MySQL共享表空间扩容

    一.什么是共享表空间和独占表空间 共享表空间以及独占表空间都是针对数据的存储方式而言的. 共享表空间: 某一个数据库的所有的表数据,索引文件全部放在一个文件中,默认这个共享表空间的文件路径在data目 ...

  10. ethtool speed HowTo : Change Speed and Duplex of Ethernet card in Linux

    To change Speed and Duplex of an ethernet card, we can use ethtool - a Linux utility for Displaying ...