导航栏高亮显示代码

//导航栏高亮显示代码

function highlightPage(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
var headers = document.getElementsByTagName(‘header‘);
if(headers.length == 0) return false;
var navs = headers[0].getElementsByTagName(‘nav‘);
if( navs.length == 0) return false;
var links = navs[0].getElementsByTagName("a");
var linkurl;
for(var i = 0; i < links.length; i++){
linkurl = links[i].getAttribute("href");
if( window.location.href.indexOf(linkurl) != -1){  //当前窗口加载的地址是否匹配导航栏内的地址
links[i].className = "here";
}
}
}

window.onload = highlightPage;
时间: 2024-10-01 11:39:31

导航栏高亮显示代码的相关文章

页面刷新跳转后,导航栏高亮显示跳转前的点击位置

需求:比如有一个二级或三四级的菜单栏,页面不跳转时实现高亮显示是很容易的,网上有很多这样的素材.但是页面一跳转,新页面可就记不住你在上一个页面点击的位置了,也就不可能高亮显示.并且很多时候,跳转后的页面菜单栏是后台动态生成的,也就是菜单栏栏目不固定,那么就不可能给菜单栏高亮效果写死.不知道这个事利用前后台交互去做会不会容易点,但是现在是要用纯前台实现. 实现原理一:这时候必须找个地方给它把点击的位置存起来,等页面跳转后,从那个地方把标记取出来,再给导航相应的位置做高亮处理就好了. 方法1:利用

IOS 自定义导航栏

我们自己新建一个View,来自定义导航栏,如下代码: #import <UIKit/UIKit.h> @interface CustomNavigation : UIView typedef enum { customEventClickLBtn1 ,//点击了最左边的按钮 customEventClickRBtn1 , //最右边的按钮 customEventClickLBtn2 ,//点击了左边第二个按钮 customEventClickRBtn2 //点击了右边最靠左的按钮 }Custo

七彩导航栏的制作(二)

在上一节的介绍中展示了通过函数改变ul类名的方式来设置对应类名的css样式来实现导航栏下方横线随栏目颜色变化的方法,但是这种方法并未真正实现属性值的跟踪,而是通过手动赋值来实现,并且代码量大,代码重复度高. 下面介绍另一种更有效的通过获取(跟踪)元素属性值的方法来设置另一元素属性的方法. 常用的获取元素和修改元素样式属性的方法主要有以下两种: <html> <a id="a0" style="color:red,background-color:green&

【AmazeUI】手机版页面的顶部导航条Header与侧边导航栏offCanvas

顶部导航条如果你细心留意下现在的页面,实在是太常见了.这个组件在手机端的页面中,同样可以借助AmazeUI这个前端框架实现.与此同时,可以在导航栏的最右方加一个触发侧边导航栏offCanvas.不要再使用BootStrap那种,一旦点击就大幅度下拉的导航了,反正我个人觉得很蛋疼的.一个导航活活地占据了页面大量位置.这个侧边导航栏offCanvas曾经是php方面的WorkPress的优秀设计来的. 使用AmazeUI做出来的效果如下: 首先是顶部导航栏的代码: <!--这里的顶部导航栏与Boot

带箭头的面包屑导航栏

制作漂亮美观的面包屑导航栏 在开始之前,我要照例给大家科普一下啥叫面包屑导航栏 类似于下面这几种的 主页>栏目页>文章页面 主页/栏目页/文章页面 可以告诉访问者他们目前在网站中的位置以及如何返回的DOM叫面包屑导航栏 但是...... 你不觉得这个不好看吗? 如果哪一天,你们公司的UI给你一张图,图里的面包屑导航栏是这样的 这样的 又或者是其他带图案的面包屑导航栏,这时候应该怎么做? 可能有朋友说这个简单,so easy,直接找个图案给导航栏加background就行了 可是,真的有这么简单

关于iOS导航控制器隐藏和显示会出现返回键失效,导航栏标题动画异常

最近做的demo  bug出现了,我觉得这个bug出现得很经典所以贴出来给大家看看, bug演示就是:点击返回键失效出现如下gif图演示的内容 为啥会出现如此奇葩的bug,系统的返回键居然失效了,尴尬症又犯了,愣是点了很久也不知所措 bug出现的源头:从不隐藏导航栏进行手势返回的时候,手势返回一半松手,回到不隐藏导航栏的页面,在push其他页面,就会出现返回键失效的问题 出现bug的重要步骤:手势返回一半又松手 进行页面隐藏导航栏的代码如下 //显示导航栏 [self.navigationCon

HTML&amp;CSS基础学习笔记1.11—导航栏

上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航栏. 导航栏在HTML中有一个语义化的标签<nav>,这个标签表示带有导航性质的内容,会有自己默认的特殊样式.语义化标签我们将会在后面讲到. 我们在这里先使用下<nav>标签,和<a>组合成一个导航栏. 代码如下: <!DOCTYPE html><html

网站搭建 (第04天) 导航栏与页脚

一.前言 经过观察可以发现,基本上每个网站都会有一个叫导航栏的东西,其目的就是为了方便用户找到自己查看的页面.导航栏可以自己制作,但我选择的方法是使用Bootstrap框架,还有给每个网页都添加一段导航栏代码会显得特别冗余,所以这里还涉及到一个模板继承的知识点,我将模板继承知识写在了Django入门: (第八天) 模板定义与继承,方便查阅. 那么有了模板继承的知识以后,就可以给整个站点设计一个公共的代码部分-导航栏,将模板页面加入到路径中,修改settings.py文件,设置TEMPLATES的

JS自适应导航栏,菜单栏

1. 打开 https://github.com/VPenkov/okayNav下载源代码 2.引入两个css样式 <link rel="stylesheet" href="css/common.min.css"> <link rel="stylesheet" href="css/okayNav.min.css"> 3.引入两个JS样式 <script src="https://code