首页 > 其他分享 >jquery/js通过当前URL对当前栏目链接高亮显示

jquery/js通过当前URL对当前栏目链接高亮显示

时间:2024-10-31 22:48:35浏览次数:1  
标签:jquery 栏目 高亮 URL 代码 js nav 当前


对于静态页面通过当前URL对当前栏目链接高亮显示这个技巧很多小伙伴问过墨鱼,今天放一下通用代码给小伙伴参考:

HTML代码:

<div class="nav">

  • <a href="index.html">首页
  • <a href="list_1.html">栏目一
  • <a href="list_2.html">栏目二
  • <a href="list_3.html">栏目三

JQ代码:

//除了首页外当前URL对当前栏目高亮突出显示

$(".nav li a:not(:first)").each(function(){

$this = $(this);

if($this[0].href==String(window.location)){

$this.parent().addClass("selected");

}

});

//当前URL对当前栏目高亮突出显示

$(".nav li a").each(function(){

$this = $(this);

if($this[0].href==String(window.location)){

$this.parent().addClass("selected");

}

});

或者使用原生js代码:(HTML代码部分的class="nav"改成id="nav")

标签:jquery,栏目,高亮,URL,代码,js,nav,当前
From: https://www.cnblogs.com/vvkk/p/18519079

相关文章

  • Delphi中TJSONObject使用问题
    jsonProcess:=TJSONArray.Create;forvari:=0toprocessForms.ListView_Processes.Items.Count-1dobegintempListItem:=processForms.ListView_Processes.Items[i];varjsonObject:=TJSONObject.Create;tryjsonObject.AddPair('pid......
  • 华为OD机试-(E卷,100分) - 补种未成活胡杨(Java & Python& JS & C++ & C )
    最新华为OD机试题目描述近些年来,我国防沙治沙取得显著成果。某沙漠新种植N棵胡杨(编号1-N),排成一排。一个月后,有M棵胡杨未能成活。现可补种胡杨K棵,请问如何补种(只能补种,不能新种),可以得到最多的连续胡杨树?输入描述N总种植数量,1<=N<=100000M未成活胡杨数量,M个空格......
  • PbootCMS提示:Undefined constant "core\basic\ISURL"
    要解决Undefinedconstant"core\basic\ISURL"的问题,可以在/core/basic/Url.php文件中定义ISURL常量。在文件顶部添加以下代码:define('ISURL',false);//或者根据需要设置为true完整代码如下:1<?php2/**3*@copyright(C)2016-2099HnaoyunInc.4*......
  • 响应式项目(RxJS+Vue.js+Spring)大决战(5):主页的实现(前端视图模块)
    书接上篇:响应式项目(RxJS+Vue.js+Spring)大决战(4):主页的实现(后端服务模块)5.2前端视图模块5.2.1整体结构的设计        前端模块app-view/home负责主页视图的建构,其结构如下图所示:        本篇所述方法,体现了极强的独特性、技巧性! 5.2.2主页home.html ......
  • jQuery选择器
    目录一、基本选择器1.标签选择器(元素选择器)2.ID选择器3.类选择器4.通配符选择器二、层次选择器1.后代选择器2.子选择器3.相邻兄弟选择器4.一般兄弟选择器三、属性选择器1.简单属性选择器2.属性值等于选择器3.属性值包含选择器4.属性值以特定字符串开......
  • js 实现鼠标拖尾特效
    废话不说,直接上代码。mousemove.jsletisDivCreated=false;letnum=0document.head.insertAdjacentHTML('beforeend',`<style>.icon-div{position:absolute;pointer-events:none;transition:all......
  • 基于SpringBoot+MySQL+SSM+Vue.js的交友系统(附论文)
    获取见最下方名片信息获取见最下方名片信息获取见最下方名片信息演示视频基于SpringBoot+MySQL+SSM+Vue.js的交友系统(附论文)技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoo......
  • 基于SpringBoot+MySQL+SSM+Vue.js的宠物猫售卖管理
    获取见最下方名片获取见最下方名片获取见最下方名片演示视频基于SpringBoot+MySQL+SSM+Vue.js的宠物猫售卖管理技术描述开发工具:Idea/Eclipse数据库:MySQLJar包仓库:Maven前端框架:Vue/ElementUI后端框架:Spring+SpringMVC+Mybatis+SpringBoot文字描述基......
  • jQuery
    1.jQuery介绍1.1jQuery是什么jQuery是一个快速、简介的JavaScript框架,是prototype之后一个优秀的JavaScript代码库(或者JavaScript框架)。jQuery设计的宗旨是“writeLess,DoMore”,指倡导更少的代码,做更多的事情,他封装JavaScript常用的功能代码,提供一种简介的JavaScript设计模式,......
  • 宝塔+DVWA function allow_url_include Disabled错误
    问题描述宝塔配置DVWA出现functionallow_url_include:Disabled错误解决方法查看DVWA文件夹中的php.ini。一般默认是正确的查看网站php环境的配置文件。宝塔默认路径为:/www/server/php/80/etc/php.ini注意,本人网站使用的是php80版本,所以路径中的数字是80,请根据实际......