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. 【c学习-7】

    #include /*#include"test31.c"*/ //定义阶乘函数 /* int fac(int n){ //定义寄存器存储变量 register int i ,f= ...

  2. 浅谈React虚拟DOM

    为什么要使用虚拟DOM 因为浏览器的DOM渲染是非常消耗性能的,很低效,我们使用虚拟DOM是为了提高DOM的渲染性能: 什么是虚拟DOM 虚拟DOM就是把真实的DOM树通过createElement转 ...

  3. vertical-align垂直居中

    <div id="content"> <div id="weizi"> 锄禾日当午,<br> 汗滴禾下土.<br> ...

  4. git将本地项目上传到远程仓库

    1.cd mygit 打开项目文件夹 2.git init 初始化git 3.git remote add origin xxx(远程仓库地址)  添加远程库   git remote -v 查看远程 ...

  5. （数据科学学习手札06）Python在数据框操作上的总结（初级篇）

    数据框(Dataframe)作为一种十分标准的数据结构,是数据分析中最常用的数据结构,在Python和R中各有对数据框的不同定义和操作. Python 本文涉及Python数据框,为了更好的视觉效果, ...

  6. （数据科学学习手札05）Python与R数据读入存出方式的总结与比较

    在数据分析的过程中,外部数据的导入和数据的导出是非常关键的部分,而Python和R在这方面大同小异,且针对不同的包或模块,对应着不同的函数来完成这部分功能: Python 1.TXT文件 导入: 以某 ...

  7. Python | 用Pyinstaller打包发布exe应用

    参考:https://jingyan.baidu.com/article/a378c960b47034b3282830bb.html https://ask.csdn.net/questions/72 ...

  8. urllib.request.urlretrieve()

    urllib模块提供的urlretrieve()函数.urlretrieve()方法直接将远程数据下载到本地. urlretrieve(url, filename=None, reporthook=N ...

  9. 加载旋转框(loading spinner)

    目标是这样的 用到的组件 AlertDialog 和 ProgressBar 先创建一个 AlertDialog 的布局 <?xml version="1.0" encodi ...

  10. 2457: [BeiJing2011]双端队列

    2457: [BeiJing2011]双端队列 链接 很奇妙的转化. 题目要求最后的所有序列也是有序的,所以可以求出最后的序列(即排序后的序列),然后分成许多份,要求每一份都是一个双端序列,求最少分成 ...