使用射流研究…实现导航切换时高亮显示的示例讲解

index.html代码内容

！DOCTYPE html html health eta charset=' utf-8 '标题导航高亮显示/title style type=' text/CSS ' body { font-size :20 px；}.nav { list-style-type : none；余量：0划水：0;} .clear:after在{content:'/20 '之后；显示：块；clear:both高度：0;可见性：隐藏；}.导航Li { float : leftbackground : # B1DFF 5右边距：1 pxcolor: # fff}。导航阿利{显示：块；高度：45px宽度宽度：120像素线高：45 px文本对齐：居中；文本装饰：无；}.活动{背景： # 28 B1 F3字体粗细：加粗；}/style/head dyul class=' nav clear ' id=' nav ' lia href=' index。html ' rel='外部不跟随' rel='外部不跟随'首页/a/lilia href=' 1。html ' rel='外部不跟随' rel='外部不跟随'栏目一/a/lilia href=' 2。html ' rel='外部不跟随' rel='外部不跟随'栏目二/a/lilia href=' 3。html ' rel='外部不跟随' rel='外部不跟随'栏目三/a/Li/ul/body脚本类型=' text/JavaScript ' src=' http : js/jquery-1.7。量滴js '/script脚本类型=' text/JavaScript ' var URL str=location。href控制台。日志(网址字符串'/')；var urlstatus=false$('#nav a ').每个（函数(){ if ((urlstr '/').indexOf($(this).attr(' href ')-1 $(this).attr('href ')！='') { $(这个)。添加CLaSS(' active ')；urlstatus=true} else { $(this).移除CLaSS(' active ')；} });if(！urlstatus) {$('#nav a ').等式(0).添加CLaSS(' active ')；}/script/html1.html代码内容

！DOCTYPE html html health eta charset=' utf-8 '标题栏目一/title style type=' text/CSS ' body { font-size :20 px；}.nav { list-style-type : none；余量：0划水：0;} .clear:after在{content:'/20 '之后；显示：块；clear:both高度：0;可见性：隐藏；}.导航Li { float : leftbackground : # B1DFF 5右边距：1 pxcolor: # fff}。导航阿利{显示：块；高度：45px宽度宽度：120像素线高：45 px文本对齐：居中；文本装饰：无；}.活动{背景： # 28 B1 F3字体粗细：加粗；}/style/head dyul class=' nav clear ' id=' nav ' lia href=' index。html ' rel='外部不跟随' rel='外部不跟随'首页/a/lilia href=' 1。html ' rel='外部不跟随' rel='外部不跟随'栏目一/a/lilia href=' 2。html ' rel='外部不跟随' rel='外部不跟随'栏目二/a/lilia href=' 3。html ' rel='外部不跟随' rel='外部不跟随'栏目三/a/li/ulh1栏目一/h1/body脚本类型=' text/JavaScript ' src=' http : js/jquery-1.7。量滴js '/script脚本类型=' text/JavaScript ' var URL str=location。href控制台。日志(网址字符串'/')；var urlstatus=false$('#nav a ').每个（函数(){ if ((urlstr '/').indexOf($(this).attr(' href ')-1 $(this).attr('href ')！='') { $(这个)。添加CLaSS(' active ')；urlstatus=true} else { $(this).移除CLaSS(' active ')；} });if(！urlstatus) {$('#nav a ').等式(0).添加CLaSS(' active ')；}/脚本/html效果图

注意：

1、位置用于获取当前页面的全球资源定位器(统一资源定位符)

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

3、索引用于检索当前全球资源定位器(统一资源定位符)中是否存在a中对应的超链接

4、 每个超文本标记语言中都拥有相同的导航结构

5、情商（指数/-指数)获取当前链式操作中第普通个框架对象，返回JQquery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1代表倒数第一个。

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

通过包括()或需要()函数，您可以在服务器执行服务器端编程语言(专业超文本预处理器的缩写)文件之前在该文件中插入一个文件的内容。

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

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

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

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

这将为开发人员节省大量时间。

这意味着您可以为所有网页创建一个标准的标题或菜单文件以供参考。当标题需要更新时，只需要更新一个包含文件，或者在网站中添加新页面时，只需要修改菜单文件(而不是更新所有页面中的链接)。

这时，就会出现这样一个问题：如何处理导航高亮？

公共代码提出后，不可能在每个页面的导航列中添加class=“active”属性进行修改，所以需要javascript。

代码如下：

脚本类型=' text/JavaScript ' src=' http :http://www . daixiaorui.com/Public/js/jquery . min . js '/script style。菜单{ padding:0margin:0列表样式-type : none；} .菜单li { background: # FFD1A4右边距：1 px；float:leftcolor: # fff} .菜单阿利{ display:block宽度：80 px；文本对齐：居中；height:32px线高：32 px；color: # ffffont-size :13 px；文本装饰： none；} .cur { background: # D96C00font-weight : bold；}/style ul class=' menu ' id=' menu ' lia href=' demo 1 . html？Aa=1' rel='external nofollow '主页/a/li lia href='demo1.html？Aa=2' rel='external nofollow '第1列/a/li lia href='demo1.html？Aa=3' rel='external nofollow '列2/a/Li/ulscript type=' text/JAVAScript ' var URL str=location . href；//alert(URL str)；var urlstatus=false$(' #菜单a ')。每个(函数(){ if ((urlstr '/')。indexOf($(this)。attr(' href ')-1 $(this)。attr('href ')！='') { $(这个)。add CLaSS(' cur ')；urlstatus=true} else { $(this)。remove CLaSS(' cur ')；} });if(！urlstatus) {$('#menu a ')。eq(0)。add CLaSS(' cur ')；}/脚本运行效果：

上面这个用JS切换导航时高亮显示的例子，就是边肖和大家分享的全部内容。希望能给大家一个参考，多多支持我们。