使用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实现动态菜单的实例代码
Nov 28 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
javascript去除空格方法小结
May 21 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
js实现本地时间同步功能
Aug 26 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 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笔记 字符串处理
2010/10/19 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
Smarty模板语法详解
2019/07/20 PHP
json字符串之间的相互转换示例代码
2014/08/21 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
答题辅助python代码实现
2018/01/16 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
Python字符串的一些操作方法总结
2019/06/10 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
优秀毕业生推荐信
2013/11/02 职场文书
统计工作个人总结
2015/03/03 职场文书
出纳岗位职责范本
2015/03/31 职场文书
公司董事任命书
2015/09/21 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
党性修养心得体会2016
2016/01/21 职场文书