使用JS实现导航切换时高亮显示的示例讲解


Posted in Javascript onAugust 22, 2018

index.html代码内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>导航高亮显示</title>
	<style type="text/css">
		body{
			font-size:20px;
		}
		.nav{
			list-style-type: none;
			margin:0;
			padding:0;
		}
		.clear:after{
			content:'/20';
			display:block;
			clear:both;
			height:0;
			visibility: hidden;
		}
		.nav li{
			float:left;
			background:#B1DFF5;
			margin-right:1px;
			color:#fff;
		}
		.nav li a{
			display:block;
			height:45px;
			width:120px;
			line-height:45px;
			text-align:center;
			text-decoration:none;
		}
		.active{
			background:#28b1f3;
			font-weight:bold;
		}
	</style>
</head>
<body>
	<ul class="nav clear" id="nav">
		<li><a href="index.html" rel="external nofollow" rel="external nofollow" >首页</a></li>
		<li><a href="1.html" rel="external nofollow" rel="external nofollow" >栏目一</a></li>
		<li><a href="2.html" rel="external nofollow" rel="external nofollow" >栏目二</a></li>
		<li><a href="3.html" rel="external nofollow" rel="external nofollow" >栏目三</a></li>
	</ul>
</body>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript">
	var urlstr = location.href;
	console.log(urlstr+'/');
  var urlstatus=false;
  $("#nav a").each(function () { 
    if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
     $(this).addClass('active'); urlstatus = true;
    } else {
     $(this).removeClass('active');
    }
   });
  if (!urlstatus) {$("#nav a").eq(0).addClass('active'); }
</script>
</html>

1.html代码内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>栏目一</title>
	<style type="text/css">
		body{
			font-size:20px;
		}
		.nav{
			list-style-type: none;
			margin:0;
			padding:0;
		}
		.clear:after{
			content:'/20';
			display:block;
			clear:both;
			height:0;
			visibility: hidden;
		}
		.nav li{
			float:left;
			background:#B1DFF5;
			margin-right:1px;
			color:#fff;
		}
		.nav li a{
			display:block;
			height:45px;
			width:120px;
			line-height:45px;
			text-align:center;
			text-decoration:none;
		}
		.active{
			background:#28b1f3;
			font-weight:bold;
		}
	</style>
</head>
<body>
<ul class="nav clear" id="nav">
		<li><a href="index.html" rel="external nofollow" rel="external nofollow" >首页</a></li>
		<li><a href="1.html" rel="external nofollow" rel="external nofollow" >栏目一</a></li>
		<li><a href="2.html" rel="external nofollow" rel="external nofollow" >栏目二</a></li>
		<li><a href="3.html" rel="external nofollow" rel="external nofollow" >栏目三</a></li>
	</ul>
<h1>栏目一</h1>
</body>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript">
	var urlstr = location.href;
	console.log(urlstr+'/');
  var urlstatus=false;
  $("#nav a").each(function () { 
    if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
     $(this).addClass('active'); urlstatus = true;
    } else {
     $(this).removeClass('active');
    }
   });
  if (!urlstatus) {$("#nav a").eq(0).addClass('active'); }
</script>
</html>

效果图

使用JS实现导航切换时高亮显示的示例讲解

注意:

1、 location.href 用于获取当前页面的url

2、 当前页面应该保存为index.html

3、 indexOf 用于检索当前url中是否存在a中对应的href

4、 每个html中都拥有相同的导航结构

5、 eq(index/-index) 获取当前链式操作中第N个JQuery对象,返回JQquery对象,当参数大于等于0时为正向选取,比如0代表第一个,1代表第二个。当参数为负数时为反向选取,比如-1代表倒数第一个。

拓展知识:js实现导航菜单点击切换选中时高亮状态方法

通过 include() 或require() 函数,您可以在服务器执行 PHP 文件之前在该文件中插入一个文件的内容。

除了它们处理错误的方式不同之外,这两个函数在其他方面都是相同的。

include() 函数会生成一个警告(但是脚本会继续执行),

而 require() 函数会生成一个致命错误(fatal error)(在错误发生后脚本会停止执行)。

这两个函数用于创建可在多个页面重复使用的函数、页眉、页脚或元素。

这会为开发者节省大量的时间。

这意味着您可以创建供所有网页引用的标准页眉或菜单文件。当页眉需要更新时,您只更新一个包含文件就可以了,或者当您向网站添加一张新页面时,仅仅需要修改一下菜单文件(而不是更新所有网页中的链接)。

这时就会出现这样的问题:导航高亮应该怎样处理?

公共代码提出后就不可能在每个页面的导航栏目后加class=“active”属性进行修改,这时就需要使用javascript来搞定。

代码如下:

<script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script>
<style>
 .menu { padding:0; margin:0; list-style-type:none;}
 .menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; }
 .menu li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}
 
 .cur{ background:#D96C00; font-weight:bold;}
</style>
 
<ul class="menu" id="menu">
 <li><a href="demo1.html?aa=1" rel="external nofollow" >首页</a></li>
 <li><a href="demo1.html?aa=2" rel="external nofollow" >栏目一</a></li>
 <li><a href="demo1.html?aa=3" rel="external nofollow" >栏目二</a></li>
</ul>
 
<script type="text/javascript">
 var urlstr = location.href;
 //alert(urlstr);
 var urlstatus=false;
 $("#menu a").each(function () {
  if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
   $(this).addClass('cur'); urlstatus = true;
  } else {
   $(this).removeClass('cur');
  }
 });
 if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>

运行效果:

使用JS实现导航切换时高亮显示的示例讲解

以上这篇使用JS实现导航切换时高亮显示的示例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
jquery实现图片切换代码
Oct 13 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
js中如何完美的解析数据
Mar 18 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 #Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 #Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 #Javascript
vuejs选中当前样式active的实例
Aug 22 #Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 #Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 #Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 #Javascript
You might like
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
js日历功能对象
2012/01/12 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
nodejs基础应用
2017/02/03 NodeJs
canvas实现探照灯效果
2017/02/07 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
python实现数通设备端口监控示例
2014/04/02 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Python range与enumerate函数区别解析
2020/02/28 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
民政局标准版离婚协议书
2014/12/01 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python