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

用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. LeetCode算法题-Design LinkedList（Java实现）

    这是悦乐书的第300次更新,第319篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第168题(顺位题号是707).设计链表的实现.您可以选择使用单链表或双链表.单链表中的 ...

  2. Benchmarking Apache Kafka: 2 Million Writes Per Second (On Three Cheap Machines)

    I wrote a blog post about how LinkedIn uses Apache Kafka as a central publish-subscribe log for inte ...

  3. 实战申请Let's Encrypt永久免费SSL证书过程教程及常见问题

    最近需要https这里看到一份不错的博客,收录一下! Let's Encrypt作为一个公共且免费SSL的项目逐渐被广大用户传播和使用,是由Mozilla.Cisco.Akamai.IdenTrust ...

  4. 在app中从下向上滑动，以找到不在默认第一页的元素

    1.在app中,如果第一面没有出现你要的元素,需要下滑拉动到你需要的元素的位置

  5. c++面经积累<2>

    4.类成员初始化方式:列表初始化和赋值初始化 赋值初始化通过在函数体内进行赋值,列表初始化,在构造函数后面加上冒号,使用初始化列表进行初始化.在函数体内进行初始化,是在所有的数据成员被分配内存空间后进 ...

  6. 使用 Linux 文件恢复工具

    使用 Linux 文件恢复工具         Linux 文件恢复的原理 inode 和 block 首先简单介绍一下 Linux 文件系统的最基本单元:inode.inode 译成中文就是索引节点 ...

  7. Python + Tornado 搭建自动回复微信公众号

    1 通过 pip 安装 wechat-python-sdk , Requests 以及 Tornado pip install tornado pip install wechat-sdk pip i ...

  8. es6箭头函数 this 指向问题

    es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){ ...

  9. Struts2拦截SQL注入

    <interceptors> <!--设置超时拦截器 --> <interceptor name="sessionOut" class="c ...

  10. 【C/C++】任意进制转换

    进制转换:R进制->10进制:10进制->R进制. #include<bits/stdc++.h> using namespace std; /*函数:r进制转换成10进制*/ ...