DDR爱好者之家

使用JS实现导航切换时高亮显示的示例讲解
站长资源 2024/11/26 佚名
12 1538
DDR爱好者之家 Design By 杰米

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="/UploadFiles/2021-04-02/jquery-1.7.min.js">


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="/UploadFiles/2021-04-02/jquery-1.7.min.js">


效果图


使用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="/UploadFiles/2021-04-02/jquery.min.js">


运行效果：


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


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


                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米