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

用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. 比较器 comparable与comparator用法

    comparable 接口 Comparable<T> 类型参数:T - 可以与此对象进行比较的那些对象的类型 public interface Comparable<T> 此 ...

  2. AjaxPro2完整入门教程

    一.目录 简单类型数据传送(介绍缓存,访问Session等) 表类型数据传送 数组类型数据传送(包含自定义类型数据) 二.环境搭建 1.这里本人用的是VS2012. 2.新建一个空的Web项目(.NE ...

  3. 生成Csv格式的字符串

    using System; using System.Collections.Generic; using System.Linq; using System.Reflection; using Sy ...

  4. python3 判断数据类型

    def estType(): eventList = [1, 'Tom', {'name': 'Lucy', 'age': 16, 'grade': 98}] print(type(eventList ...

  5. 【PAT】A1034Head of a Gang

    昨天准备学完图相关的知识,但是学起来挺懵的,理解起来不难,但自己一回想,又什么都想不起来. 翻来覆去看图的遍历,还是觉得有点没到位. 所以做题来检测一下,果然学和自己做是两码事. 先看的书,又看的柳婼 ...

  6. 安装指定版本的docker服务

    参考博客:Docker CE 镜像源站 参考博客:docker启动异常driver not supported 1. 说明 之前部署docker服务的时候都是安装最新的docker版本,并使用dock ...

  7. 记录日常Linux常用软件

    yum -y install gcc gcc-c++ autoconf pcre pcre-devel make automake yum -y install wget httpd-tools vi ...

  8. Mac系统编译FFmpeg

    转载请标明来源:我不是掌柜的博客 前言 维基百科解释:FFmpeg是一个开源软件,可以运行音频和视频多种格式的录影.转换.流功能,包含了libavcodec – 这是一个用于多个项目中音频和视频的解码 ...

  9. .NET CORE学习笔记系列(2)——依赖注入[6]: .NET Core DI框架[编程体验]

    原文https://www.cnblogs.com/artech/p/net-core-di-06.html 毫不夸张地说,整个ASP.NET Core框架是建立在一个依赖注入框架之上的,它在应用启动 ...

  10. Zabbix 3.4.7调整监控阈值以及告警级别

    1.找到需要监控的主机:右上角进行搜索 我们要更改sepm02p的阈值和级别: 进行更改级别:先点击Triggers , 选中要更改的监控项,例如我要更改CPU,点击以下红色标出的,千万不要选择Tem ...