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. SQL：检索数据-基本检索

    检索数据 1.select语句 增删改查四大操作之"查",即检索: 一般包括:what,where:查什么,从哪里选择 2.检索单个列 例:想从products表中检索名为prod ...

  2. mysql 如何监控innodb的阻塞

  3. 微信小程序navigator无法跳转情况

    情况有三种 跳转的页面没有在app.json中注册 跳转的路径不正确 以上两种在命令行(console)中都会提示 跳转的页面在TabBar中,需要将open-type属性是设置为switchTab

  4. JavaScript--动态添加元素

    在网页中,使用JavaScript动态创建元素的方式有三种: 1.document.write() 2.Element.innerHTML 3.document.createElement() 在上述 ...

  5. Xcode升到7.1插件失效解决方法

    Mac前段时间下载了新的OS系统与Xcode 7.1,然而在使用Xcode 7.1时,发现插件不能用了,瞬间木有爱了,正好交流群里有人问到了插件失效的问题,经过各路大神的神通最终用下面这种方法完美解决 ...

  6. sublime3常用插件总结

    本人之前使用的是webstorm,后来改用sublime,渐渐的爱上了它的快!(自行体会) 正式介绍sublime3常用的一些插件,安装流程不再赘述! SublimeTmpl 创建常用文件初始模板,必 ...

  7. [转]Nginx伪静态配置和常用Rewrite伪静态规则集锦

    Nginx伪静态配置和常用Rewrite伪静态规则集锦 作者: 字体:[增加 减小] 类型:转载 时间:2014-06-10 我要评论 伪静态是一种可以把文件后缀改成任何可能的一种方法,如果我想把ph ...

  8. 一次 group by + order by 性能优化分析

    一次 group by + order by 性能优化分析 最近通过一个日志表做排行的时候发现特别卡,最后问题得到了解决,梳理一些索引和MySQL执行过程的经验,但是最后还是有5个谜题没解开,希望大家 ...

  9. python 连接MSSQL

    # -*- coding: utf-8 -*- import pymssql conn=pymssql.connect(host=".",user="sa",p ...

  10. 二、Django需要的知识点

    1.请求(request): 客户端到服务器端. 响应(response):服务器端到客户端. HTTP/1.1 协议共定义了 8 种请求方式,分别是: OPTIONS. HEAD. GET. POS ...