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

用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. Centos7安装搭建NTP服务器和NTP客户端同步时间

    NTP简介: NTP是网络时间协议(Network Time Protocol),它是用来同步网络中各个计算机的时间的协议. 在计算机的世界里,时间非常地重要 例如:对于火箭发射这种科研活动,对时间的 ...

  2. C# groupby 应用小技巧

    这两天感冒了,导致大脑无法有效运转,一个朋友问我,groupby 怎么给list 分组,然后再将其中一个字段组合起来,恩,觉得很简单,结果才发现,自己的脑子真的是不够用了: 恩,其实是想写其他的,但是 ...

  3. elementUI el-table渲染的时候出现bug

    如下: 问题: value的值一直渲染不出来,因为是boolean类型,出现了bug,把true变成一个字符串就能显示了,太不好用了 为了能渲染出来,不得不写成下列形式:

  4. [LeetCode] 8. 字符串转换整数 (atoi)

    题目链接:https://leetcode-cn.com/problems/string-to-integer-atoi/ 题目描述: 请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先 ...

  5. linux sort排序及取前几条数据

    查看sort --help -n 根据字符串的数值进行比较 -k 根据某一个关键字的位置或者类型排序 -r 倒序排序 -t 字段分隔,后面跟分隔符 查看head --help -n 打印前几行记录,后 ...

  6. Python学习--Python运算符

    什么是运算符? 举个简单的例子 4 + 5 = 9 . 例子中,4 和 5 被称为操作数,"+" 称为运算符. Python语言支持以下类型的运算符: 算数运算符 比较(关系)运算 ...

  7. Linux内存管理 (9)mmap(补充)

    之前写过一篇简单的介绍mmap()/munmap()的文章<Linux内存管理 (9)mmap>,比较单薄,这里详细的梳理一下. 从常用的使用者角度介绍两个函数的使用:然后重点是分析内核的 ...

  8. LOJ2514 CEOI2011 Hotel 贪心

    传送门 考虑一个贪心:对于所有人群按照收益从大到小排序,对于每一个人群找到当前能够选择的代价最小的房间成为一组可行订单(如果没有就不可行),最后将这些订单按照收益排序,选其中正的前\(o\)大即可.找 ...

  9. 关于mysql中unique的插入Duplicate key

    MySQL数据库中 如果在后台中不做判断是否unique的column是否存在的话,直接把数据操作给dao层再传给DB的话,就会报重复的唯一值.如果确实是不希望先取出判断unique的column是否 ...

  10. JMeter配置好环境变量后无法启动---翻车笔记

    双击jmeter.bat出现下图情况 手欠了win7中配置 path无意中多删了变量 解决方法:在计算机-属性-高级系统设置-环境变量Path中添加 %SystemRoot%/system32;%Sy ...