两种简单实现菜单高亮显示的JS类代码
发布时间:2024-11-07 12:56:36
标签:JavaScript,实用,菜单高亮,高亮
记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是比较常用到的效果,正好此次又要用到,特地整理出我所写的两种高亮类.
其实思路很简单,第一种方法是通过遍历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现思路也比较简单,即通过判断点击,给点击项加载高亮样式.
第一种判断当前URL值高亮类代码:
//@Mr.Think---判断URL实现菜单高亮显示
function highURL(menuId,classCur){
if(!document.getElementById) return false;
if(!document.getElementById(menuId)) return false;
if(!document.getElementsByTagName) return false;
var menuId=document.getElementById(menuId);
var links=menuId.getElementsByTagName("a");
for(var i=0; i<links.length; i++ ){
var menuLink=links[i].href;
var currentLink=window.location.href;
if(currentLink.indexOf(menuLink)!=-1){
links[i].className=classCur;
}
}
}
参数说明:
1.menuId : 链接组所在ID;
2.classCur : 高亮显示时的样式class名.
调用方法:
window.onload=function highThis(){highURL("youId","youhighclass");}
第二种点击后高亮显示当前类:
//@Mr.Think---点击实现高亮显示
function highOnclick(elemId,classCur) {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById(elemId)) return false;
var elemId = document.getElementById(elemId);
var links = elemId.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
links[i].onclick = function() {
for (n = 0; n < links.length; n++) {
links[n].className = "";
this.className = classCur;
this.blur();
}
}
}
}
参数说明:
1.elemId : 链接组所在ID;
2.classCur : 点击后显示的样式class名.
调用方法:
window.onload=function highThis(){highOnclick("youId","youhighclass");}
此方法扩展性较强,比如可以通过判断parentNode.nodeName值来使某一类型链接不被遍历,等等.


猜你喜欢
- 在本章中,我们将详细讨论对称和非对称密码术.对称密码术在此类型中,加密和解密进程使用相同的密钥.它也被称为秘密密钥加密.对称加密的主要特征如
- Laravel 的上一个 LTS(长期支持)版本是 Laravel 5.1,发布于 2015 年 6 月,按照对 LTS 版本的约定,两年的
- 简介学习慕课课程,Flask前后端分离API后台接口的实现demo,前端可以接入小程序,暂时已经完成后台API基础架构,使用 postman
- 本文实例讲述了Python实现基于HTTP文件传输的方法。分享给大家供大家参考。具体实现方法如下:一、问题:因为需要最近看了一下通过POST
- 1:masterha_check_repl 副本集方面报错 replicates is not defined in
- 前言:keras是一个十分便捷的开发框架,为了更好的追踪网络训练过程中的损失函数loss和准确率accuracy,我们有几种处理方式,第一种
- SQL 多条件查询以后我们做多条件查询,一种是排列结合,另一种是动态拼接SQL如:我们要有两个条件,一个日期@addDate,一个是@nam
- 在日常的生活和工作中,我们经常会遇到一些大小问题,其中有很多的问题,都是可以使用一些简单的Python代码就能解决。比如不久前的复旦大佬,用
- python里的super().init()有什么用?对于python里的super().__init__()有什么作用,很多同学没有弄清楚
- 实时画图import matplotlib.pyplot as pltax = [] # 定义一个 x 轴的空列表用来接收动态
- 针对之前安装mysql的笔记进行了总结,分享给大家。版本:MySQL-5.7.16-winx64平台:Windows 7 x641、进入my
- Map 类型先看例子 m1:func main() { m := make(map[int]int) mdMap(m) fmt.Printl
- set 是一个无序的元素集合,支持并、交、差及对称差等数学运算, 但由于 set 不记录元素位置,因此不支持索引、分片等类序列的操作。初始化
- 本文导读:删除表中的数据的方法有delete,truncate, 其中TRUNCATE TABLE用于删除表中的所有行,而不记录单个行删除操
- 一、类型转换 1.转换成字串 ECMAScript的Boolean值、数字和字串的原始值的有趣之处在于它们是伪对象,这意味着它们实际上具有属
- SpringBoot体系内推荐使用Thymeleaf作为前端页面模板。jsp还得自己整合一下。1.项目结构对比以前的项目结构,main目录下
- 服务器:#server.py#!/usr/bin/env python#-*-coding:utf-8-*-import sysimport
- 下面的request.servervariables例子都是服务器探针采用的asp代码本机ip:<%=request.serverva
- 1. 起因当我们需要写一个非常非常长的循环时,通常在某个循环如果出现error,那么整个代码后面的循环就不能进行。这时候试想,如果你在服务器
- 前言最近在数据库的一张表添加两个字段,后来提示什么磁盘空间不足什么什么的,后来数据库就断开连接了,之后就一直连接不上去后来,最后经过思考终于