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

用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. 【原】Java学习笔记020 - 面向对象

    package cn.temptation; public class Sample01 { public static void main(String[] args) { // 成员方法的参数列表 ...

  2. c/c++ 多线程 绕过mutex的保护

    多线程 绕过mutex的保护 mutex,能够解决线程安全的问题,但它不是万能的.下面的例子虽然使用了mutex,但是恶意注入了一个外部函数,导致把被mutex保护的双向链表,让一个外部的指针指向了, ...

  3. 【转载】【时序约束学习笔记1】Vivado入门与提高--第12讲 时序分析中的基本概念和术语

    时序分析中的基本概念和术语 Basic concept and Terminology of Timing Analysis 原文标题及网址: [时序约束学习笔记1]Vivado入门与提高--第12讲 ...

  4. Cs231n课堂内容记录-Lecture 7 神经网络训练2

    Lecture 7  Training Neural Networks 2 课堂笔记参见:https://zhuanlan.zhihu.com/p/21560667?refer=intelligent ...

  5. Canadian-dollar_RMB

    import pandas as pd import matplotlib.pyplot as plt import statsmodels as sm from statsmodels.graphi ...

  6. Python爬虫实战之Requests+正则表达式爬取猫眼电影Top100

    import requests from requests.exceptions import RequestException import re import json # from multip ...

  7. #018 C语言刷题 素数问题

    今天做题学会了一个求素数的方法 总分 13 孪生素数 相差为2的两个素数称为孪生素数.例如,3与5,41与43等都是孪生素数.设计程序求出指定区间上的所有孪生素数对.区间上限和下限由键盘获取. 程序运 ...

  8. JavaScript-创建日志调试对象(面向对象实例)

    参考自http://www.2cto.com/kf/201312/261990.html IC.js文件 自己封装的js类库 /** * * @authors Your Name (you@examp ...

  9. Linux 实例常用内核网络参数介绍与常见问题处理

    本文总结了常见的 Linux 内核参数及相关问题.修改内核参数前,您需要: 从实际需要出发,最好有相关数据的支撑,不建议随意调整内核参数. 了解参数的具体作用,且注意同类型或版本环境的内核参数可能有所 ...

  10. 关于Eclipse的版本、分支、衍生版本

    Eclipse 简介: Eclipse的历史: Eclipse的发布版本: Eclipse分支: 关于不同分支版本的区别,点击链接: http://www.eclipse.org/downloads/ ...