即实现鼠标点击其中一个菜单发生样式的改变，当点击下一个菜单时，当前菜单样式改变，其他菜单均变为之前样式。

用JavaScript，jQuery都可以实现，只是后者是封装的JavaScript库，具有sibling()方法，可以直接使其同胞元素取消样式，而JavaScript需要使用循环来使其上一菜单样式取消，当前菜单加上样式。

实现代码：

1.JavaScript：

当点击当前菜单时，上一菜单样式取消，当前菜单增加该样式，为了下一菜单的实现，须将：onum = this;将当前li对象赋予onum。

this相当于是当前li对象。

<script>

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

  var i,num = 0;

  onum = arr[num];

  for(i in arr){

    arr[i].onclick = function(){

      onum.className = ' ';

      this.className = "active";

      onum = this;

    }

  }

</script>　

2.jQuery：

使用sibling()方法来使当前元素的同胞元素都取消该样式。

this表示当前元素。

<script>

  $("li").click(function(){

    $(this).addClass("active").siblings().removeClass("active");

  });

</script>

如此看来，jQuery是要比JavaScript简便一些，但jQuery思想还是使用的JavaScript思想，并未改变。

完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    *{

        padding:0px;margin:0px;

        list-style:none;

    }

    .box{

        width: 400px;

        height: 50px;

        background-color: antiquewhite;

    }

    .box ul li{

        height: 50px;

        width: 25%;

        line-height: 50px;

        display: block;

        float: left;

        text-align: center;

    }

    ul li:hover{

        cursor: pointer;

    }

    .active{

        background:red;

    }

    </style>

</head>

<body>

    <div class="box">

        <ul>

           <li>1</li>

           <li>2</li>

           <li>3</li>

           <li>4</li>

        </ul>

    </div>

    <script>

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

        var i,num = 0;

        onum = arr[num];

        for(i in arr){

            arr[i].onclick = function(){

                onum.className = ' ';

                this.className = "active";

                onum = this;

            }

        }

    </script>

</body>

</html>

JavaScript

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    *{

        padding:0px;margin:0px;

        list-style:none;

    }

    .box{

        width: 400px;

        height: 50px;

        background-color: antiquewhite;

    }

    .box ul li{

        height: 50px;

        width: 25%;

        line-height: 50px;

        display: block;

        float: left;

        text-align: center;

    }

    ul li:hover{

        cursor: pointer;

    }

    .active{

        background:red;

    }

    </style>

</head>

<body>

    <div class="box">

        <ul>

           <li>1</li>

           <li>2</li>

           <li>3</li>

           <li>4</li>

        </ul>

    </div>

    <script>

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

        var i,num = 0;

        onum = arr[num];

        for(i in arr){

            arr[i].onclick = function(){

                onum.className = ' ';

                this.className = "active";

                onum = this;

            }

        }

    </script>

</body>

</html>

jQuery

注意：

在jQuery使用时需要引入本地库文件，或者使用那个网址也可以

JavaScript与jQuery关于鼠标点击事件的更多相关文章

  1. jQuery模拟鼠标点击事件失效的问题

    最近使用jQuery操作浏览器获取数据,需要对分页的信息进行处理,发现直接使用$('div#pager a.next').click();的这种写法无法触发点击事件. 使用trigger('click ...

  2. JS控制鼠标点击事件

    鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击 登录时,就会出现登录窗口.大体的意思就是这样,直接上代码了,简单易懂. <!DOCTY ...

  3. css禁用鼠标点击事件

    css禁用鼠标点击事件 .disabled { pointer-events: none; } <div class="main-container disabled"> ...

  4. jquery中交替点击事件toggle方法的使用示例

    jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...

  5. MacOS获取辅助功能权限控制鼠标点击事件

    昨晚玩一个模拟经营的游戏,由于升级太慢我就不停的种树卖树来换取经验值.不过重复点击10几分钟后,实在受不了.网上本来准备找个鼠标自动点击的软件用用.结果没找到趁手的.如是自己写了个. 自己设置需要点击 ...

  6. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  7. js和jquery触发按钮点击事件

    js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...

  8. 每天一个JavaScript实例-铺货鼠标点击位置并将元素移动到该位置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. Echarts如何添加鼠标点击事件？防止重复触发点击事件

    Echarts如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById(' ...

随机推荐

  1. selenium-弹窗操作（八）

    本次以笔者公告栏的 打赏 弹窗为例 对弹窗中的一些操作进行封装后,在测试中使用 作用:减少对弹窗反复操作时进行定位的麻烦,以后使用中都直接调用即可达到目的 # coding=utf-8 from se ...

  2. MPP架构海量数据分析仓库——Greenplum介绍

    一.Greenplum背景 时间回到2002年,互联网行业经过近10年的发展,数据量正处于快速增长期: 1.传统的主机计算模式在海量数据面前,除了造价昂贵外,在CPU计算和IO吞吐上不能满足海量数据的 ...

  3. iOS开发之OC与swift开发混编教程，代理的相互调用,block的实现。OC调用Swift中的代理， OC调用Swift中的Block 闭包

    本文章将从两个方向分别介绍 OC 与 swift 混编 1. 第一个方向从 swift工程 中引入 oc类 1. 1 如何在swift的类中使用oc类    1.2  如何在swift中实现oc的代理 ...

  4. MFC映射

    所有CDC输出函数最终都会输出到物理平面(屏幕窗口.打印纸等).这些物理平面的单位量化往往多种多样,比如像素.打印点.英寸.毫米等等.这样可能会造成很多混乱,所以CDC输出对所有物理平面进行统一抽象化 ...

  5. memset的用法

    memset的功能是将一块内存中的内容以单个字节逐个拷贝的方式放到指定的内存中去. 如memset(dp,0,sizeof(dp))其中dp为一个int型数组,因为int为4个字节,那么每一个字节的位 ...

  6. Navicat如何导出Excel格式表结构

    SELECTCOLUMN_COMMENT 字段名,COLUMN_NAME code,COLUMN_TYPE 数据类型,DATA_TYPE 字段类型,CHARACTER_MAXIMUM_LENGTH 长 ...

  7. Go语言学习笔记-流程控制（二）

    Go语言流程控制 字典类型Map 1.上节遗留:map字典类型 变量声明:var myMap map[string] PersonInfo 其中,myMap是变量名,string是键的类型,Perso ...

  8. 注册表修改computer name

    修改windows server的机器名的时候,发现change按钮是disable的. 手动修改不了,用注册表regedit来修改. HKEY_LOCAL_MACHINE\SYSTEM\Curren ...

  9. SQLServer之删除索引

    使用SSMS数据库管理工具删除索引 使用表设计器删除索引 表设计器可以删除任何类型的索引,本示例演示删除XML辅助索引,删除其他索引步骤相同. 1.连接数据库,选择数据库,展开数据库->选择数据 ...

  10. Python基础——5模块

    使用模块 ‘the first line is zhushi’ _author_ = ‘syz’ import sys def test(): args = sys.argv if len(args) ...