使用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 ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
关于layui时间回显问题的解决方法
Sep 24 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
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
ie6 动态缩略图不显示的原因
2009/06/21 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python与php实现分割文件代码
2017/03/06 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
python 中如何获取列表的索引
2019/07/02 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
Python实现word2Vec model过程解析
2019/12/16 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
初中生自我鉴定
2014/02/04 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
安全责任书模板
2014/07/22 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
音乐课外活动总结
2015/05/09 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
Oracle中update和select 关联操作
2022/01/18 Oracle
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫