首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用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实现导航切换时高亮显示的示例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

web_callBack

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
jquery 插件学习（三）
Aug 06 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
jQuery实现的小图列表，大图展示效果幻灯片示例
Oct 25 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
JS出现404错误原理及解决方案
Jul 01 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
CAD(1) 滚动条(1) Sunmao(1) macos(1) 404(1) svg(1) 输入法(2) sout(1) 403(1) Sentry(1)
You might like
sae使用smarty模板的方法
2013/12/17 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
如何在vue中使用百度地图添加自定义覆盖物（水波纹）
2020/11/03 Javascript
python求crc32值的方法
2014/10/05 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
酒店仓管员岗位职责
2014/04/28 职场文书
运动员口号
2014/06/09 职场文书
水电维修专业推荐信
2014/09/06 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
学习计划是什么
2019/04/30 职场文书