开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

通过window.location在jQuery的当前菜单上添加类

，可以实现在网页中根据当前页面的URL来动态添加类，以便在菜单中高亮显示当前页面。

具体实现步骤如下：

首先，需要引入jQuery库，确保在页面中可以使用jQuery的相关方法。
在菜单的HTML结构中，给每个菜单项添加一个唯一的标识符，例如给菜单项的li元素添加一个id或class。
使用jQuery的ready()方法，确保页面加载完成后执行代码。
在ready()方法中，使用window.location获取当前页面的URL。
使用jQuery的选择器，选中当前页面对应的菜单项。
使用addClass()方法，给选中的菜单项添加一个类，用于样式的设置。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>菜单高亮示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .active {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <ul>
    <li id="menu1"><a href="page1.html">页面1</a></li>
    <li id="menu2"><a href="page2.html">页面2</a></li>
    <li id="menu3"><a href="page3.html">页面3</a></li>
  </ul>

  <script>
    $(document).ready(function() {
      var currentUrl = window.location.href;
      var menuItems = $("ul li"); // 根据实际情况修改选择器

      menuItems.each(function() {
        var menuItemUrl = $(this).find("a").attr("href");
        if (currentUrl.indexOf(menuItemUrl) !== -1) {
          $(this).addClass("active");
        }
      });
    });
  </script>
</body>
</html>

在上述示例代码中，通过window.location.href获取当前页面的URL，然后使用jQuery的选择器选中菜单项，并通过addClass()方法给选中的菜单项添加active类。最后，通过CSS样式设置active类的样式，以实现菜单高亮效果。

对于腾讯云相关产品和产品介绍链接地址，由于不能提及具体品牌商，建议在腾讯云官方网站上查找相关产品，例如腾讯云的云服务器、云数据库等产品，以及与云计算相关的解决方案和服务。

相关搜索:在jQuery上添加默认类如何通过jQuery在针对特定URL的页面上添加类？添加/删除除当前事件上的类之外的所有类通过datatable jQuery插件添加的按钮上的jquery单击事件在移动设备上无法使用Jquery向HTML添加类在macOS上添加额外的菜单栏如何通过jQuery在之前添加的字段下面添加字段？jQuery -在元素中添加/删除类名，并在按钮上切换活动类遍历jquery数组并将类添加到当前项中，而下次从上一项中删除类，通过通过jQuery拉取所有数据后，如何保留通过API添加的类？使用javascript或jquery自动将类添加到特定的折叠菜单将jQuery活动类添加到特定url页面加载的菜单中检查当前元素是否有类在jQuery中的子元素将当前页面显示在菜单栏上的粗体中检测通过ajax/jQuery添加的附加表行上的单击事件 Wordpress Max Mega菜单，想要在粘性导航栏上添加单独的类使用jquery在div内的锚标记中添加类通过添加带有Jquery的类来解决CSS3过渡问题在JQuery中通过类从父级获取元素的更好方法使用jQuery将当前URL与UL中的herf匹配,如果匹配则添加类

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

谈一谈地址栏url的跳转

地址栏url是我们前端的重要组成部分，我们需要用到它进行页面跳转，页面传参。像我就经常用到地址栏传参的方法，但却很少用到修改地址栏的方法，近期就用到了这个修改地址栏参数的需求，发现意外的好用，于是今天就来总结一下地址栏的相关操作。

03

JavaScript中window.open（）和Window Location href的区别「建议收藏」

specs 可选。一个逗号分隔的项目列表。支持以下值： channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器 directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限IE浏览器 fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器 height=pixels 窗口的高度。最小.值为100 left=pixels 该窗口的左侧位置 location=yes|no|1|0 是否显示地址字段.默认值是yes menubar=yes|no|1|0 是否显示菜单栏.默认值是yes resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes status=yes|no|1|0 是否要添加一个状态栏.默认值是yes titlebar=yes|no|1|0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes top=pixels 窗口顶部的位置.仅限IE浏览器 width=pixels 窗口的宽度.最小.值为100 replace Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

02

JavaScript中window.open（）和Window Location href的区别

URL 可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口

05

js 导航判断高亮

前几天有个同学问说他有个 cms 没有 if 判断标签，php 还不会写，我就给他写了个能用的 jq，原理就是通过判断地址栏的链接和代码里导航部分的链接一致的话就高亮，分享出来给大家参考。

02

JS DOM学习笔记

2、使用window对象的属性、方法的时候可以省略window。例如：window.alert("hello")一般写成alert("hello"); window.document一般写成document

04

AngularJS 服务(Service)

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

01

鲜为人知的前端知识

需要注意的是如果是通过copy paste代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行，而Firefox中虽然不会自动去掉，但它根本就不支持在地址栏运行JS代码

03

使用IE6看老赵的博客——jQuery初探

可能老赵很反感IE6，所以他在自己的博客里面做了点手脚，如果是IE6浏览他的博客的话，那么就会跳转到另一个页面。　　很郁闷，看个博客吗，还要在安装一个浏览器？俺很懒，俺就是想要用IE6看！　　最近在看jQuery，刚刚入一点门，发现了一个有趣的函数，就拿老赵的博客做实验了，哈。装入一个 HTML 网页最新版本。 jQuery 代码: $.ajax({ url: "test.html", cache: false, success: function(html){ $("#re

07

回到基础：什么是DOM及DOM操作？

文本主要介绍文档对象模型(DOM),了解什么是DOM操作，以及如何使用砶 DOM API 与 JS 中的 Web 页面进行交互。

01

web前端设计与开发期末作品: 服装主题网页设计——女装下拉菜单带特效 (11页) HTML+CSS+JavaScript 网页设计期末作业个人主页…[通俗易懂]

1.网页作品简介：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。`总共11个页面。

03

页面刷新跳转的，保持当前选中项高亮

今天写一个不太难的问题，但是对于有些知识点盲区的地方，就要花一些时间去百度，查资料解决问题了。项目开发的时候会遇到这样或者那样的问题，比如，左侧导航栏二级菜单点击之后，跳转新的界面，新的界面的高亮状态是点击时候的状态。

04

前端温习(三)： JavaScript Browser 对象

Window 对象表示浏览器中打开的窗口。这么一说大家肯定还是和我一样一脸懵逼，浏览器中打开的窗口是新的标签吗？就有下文的白话文。

02

JavaScript 学习（2）

参考： http://www.w3cschool.cc/js/js-window.html

02

前端温习(三)： JavaScript Browser 对象

Window 对象表示浏览器中打开的窗口。这么一说大家肯定还是和我一样一脸懵逼，浏览器中打开的窗口是新的标签吗？就有下文的白话文。

01

你知道 JavaScript 有 535 种方法刷新页面吗？

第 1 种 location = location 第 2 种 location = location.href 第 3 种 location = window.location 第 4 种 location = self.location 第 5 种 location = window.location.href 第 6 种 location = self.location.href 第 7 种 location = location['href'] 第 8 种 location = window['lo

01

在浏览器窗口中加载新的url

通常，在前端页面中如果需要跳转到指定页面，可以通过标签进行跳转。而在某些情况下，比如ajax调用之后想直接跳转到指定页面，想跳转页面不能再用标签实现。此时，可以通过浏览器Location对象实现。

03

网站防扒JS代码技术合集- 星泽V社

禁用右键菜单 1、右键无任何反应第一种 document.oncontextmenu = new Function("return false;"); 第二种 document.oncontextmenu = function (event){ if(window.event){ event = window.event; }try{ var the = event.srcElement; if (!((the.tagName == "INPUT" && the.type.toLowerCase() =

02

PDO实现学生管理系统

这里实现一个简单的学生管理系统，供大家参考，具体内容如下需要建立如下文件： index.php menu.php //菜单栏 add.php //添加数据 edit.php // 编辑数据 action.php // 添加，删除，编辑的实现分别写一下每个文件的代码： menu.php: <html <h2 学生信息管理</h2 <a href="index.php" rel="external nofollow" 浏览学生</a <a href="add.php" rel="external n

01

Web浏览器中的JavaScript

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

02

简单JS书签丨同时预览网站在不同尺寸上的效果

甚至还会用一下chrome的toggle工具，来查看自己网站在不同屏幕分辨率下是否存在bug

02

window location href页面跳转的几种用法及其延展「建议收藏」

如果页面中自定义了frame，那么可将parent、self、top换为自定义frame的名称,效果是在frame窗口打开url地址。

01

根据访问请求客户端类型自动跳转到对应的页面地址，自动跳转到手机页面

在智能移动终端横行霸道的今天，使用移动终端来访问网站的用户是越来越多，但针对PC用户开发的网站，在移动终端上的体验非常差，这不，我们开始针对移动终端也制作了体验相对更好的页面，那么我们怎么才能知道用户使用的是哪种终端来访问我们的网站呢，总不能让用户再来记一遍我们的手机站域名吧，查阅资料，有很多方法可以实现这个需求，现在将发现的方法记录如下：

02

Window.location 详细介绍

如果你需要获取网站的 URL 信息，那么 window.location 对象就是为你准备的。使用它提供的属性来获取当前页面地址的信息，或使用其方法进行某些页面的重定向或刷新。

03

标题载入添加loading状态

昨天不知道在谁的博客看到一个特效，鼠标移到标题的时候，标题会向右缓缓移动，感觉不错，还留了言，博主没有回复，我现在也不急的是谁的博客了。

03

从一个bug说jquery中的attr和prop

代码功能很简单，点击"showStatus", 获取每个checkbox的状态。注意，这里获取状态值时，我们使用了jquery的attr函数。

02

通过过滤器实现前后端分离的跨域问题

局部开启：在controller类上加注解@CrossOrigin（可以详细看注解里面的设置

02

JavaScript(九)

这一篇，我们讲讲 BOM。ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么 BOM(浏览器对象模型)则无疑才是真正的核心。 BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

04

这份 window.location 备忘单，让你更有条理解决地址路径问题！

作者：Samantha Ming 译者：前端小智来源：medium 点赞再看，养成习惯本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞

02

拿php写一个投票系统出来，比较简单de啦

sql: -- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: 2022-03-28 05:42:05 -- 服务器版本： 10.1.13-MariaDB -- PHP Version: 5.6.21 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00";

03

setInterval做定时器

<script src="/js/jquery-1.8.3.min.js"></script> <script> $(function () { var clo= setInterval(time, 1000);//一秒　　　　　　　　var count = 4; function time() { $("#time").text(count); //修改页面

07

被问到的一些面试题

最后，说说手机端与pc兼容问题： // JavaScript Document function mobile_device_detect(url){ var thisOS=navigator.p

02

盘点操作URL中常用的几个高效API

通常在实际项目中，无论操作数据、或是dom，我们需要熟悉一些浏览器的API,或是js原生给我们扩展的API，我们熟悉了这些API,某种意义上来说，一些高效的API和方法常常会解惑你项目中遇到的很多疑难杂症。

02

抛弃jQuery，拥抱原生JavaScript

Why not jQuery 1. 模式变革 jQuery 代表着传统的以 DOM 为中心的开发模式，但现在复杂页面开发流行的是以 React 为代表的以数据/状态为中心的开发模式应用复杂后，直接操作 DOM 意味着手动维护状态，当状态复杂后，变得不可控。React 以状态为中心，自动帮我们渲染出 DOM，同时通过高效的 DOM Diff 算法，也能保证性能。我们在 React 应用实践中也发现，大部分当你想直接操作 DOM 的时候，就意味着你可能做错了。 2. 不支持同构渲染重构就是前后端运行同一份代

08

每个程序员都会的 35 个 jQuery 小技巧

收集的35个 jQuery 小技巧/代码片段，可以帮你快速开发. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the comment fi

01

收集的35个 jQuery 小技巧/代码片段，可以帮你快速开发.

注: 在版本jQuery 1.4中，.support 替换掉了.browser 变量

02

JavaScript跨域解决方式

平时工作中经常被JavaScript跨域问题所困扰，其实有很多种解决方式，下面给大家介绍常用的几种：

02

JavaScript BOM

window.open( "弹窗内容的url", "窗口名称", "窗口特征", true/false );

02

如何防止网站被扒的解决方法！

这个代码能够直接保护整个站，而不再是单个页面，直接把代码放到自己的网站上，如果是博客建议放到header.php头部文件，如果是单页面直接放到首页即可！

00

用HTML/JS/PHP方式实现页面延时跳转

本文介绍了页面跳转的三种方式：HTML/JS/PHP，并给出了具体的例子。对于HTML方式，直接在HEAD中添加<meta>标签即可；对于JS控制跳转方式，使用了setTimeout函数；对于PHP脚本控制跳转方式，使用了header函数。需要注意的是，JS控制跳转方式中，如果跳转页面需要刷新当前页面，可以使用window.location.href进行跳转，而PHP脚本控制跳转方式中，如果跳转页面也需要刷新当前页面，可以使用header函数进行跳转。

08

程序员都会的 35 个 jQuery 小技巧

收集的35个 jQuery 小技巧/代码片段，可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the

00

从编程小白到全栈开发：操控浏览器

一个程序猿和普通电脑用户，当他们浏览到一个效果炫酷的网页的时候，他们的反应是不太相同的：

03

Web前端实现锚点功能的三种方式

这种方式非常简单，给待跳转元素添加 id，之后修改 window.location 即可，用法如

03

【Go 语言社区】JS 相关---Window Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。 Window Location window.location 对象在编写时可不使用 window 这个前缀。一些例子： location.hostname 返回 web 主机的域名 location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口（80 或 443） location.protocol 返回所使用的 web 协议（http:// 或

07

帝国CMS实现【加入收藏】与【设为首页】的方法[通俗易懂]

本文实例讲述了帝国CMS实现加入收藏与设为首页的方法。分享给大家供大家参考。具体实现方法如下：

02

JavaScript Window Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

02

vue项目中添加cnzz统计

在App.vue中添加： export default { name: 'App', mounted() { // 创建cnzz统计js const script = d

02

比较实用的jQuery代码段

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

04

前端路由的原理及应用

早期的路由都是后端来实现的，根据用户访问的地址的不同，浏览器从服务器请求对应的资源或页面展示给用户。当页面数据量大，结构复杂的时候，随之造成服务器的压力也比较大，而且用户访问速度也比较慢。

02

26 个 jQuery使用技巧

The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips, tricks and solutions are coming available. That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions. 1. 禁用右键点击（Disable right-click）

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭