新闻中心

jQuery实现当前页面菜单项高亮

作者 / 无忧主机时间 2012-08-22 06:30:08

如果你是一名技术性站长，除了精通你使用的php开源程序建站以外，建议你也要多多接触一下网站的前端技术，虽然说作为开源系统很多的前端效果都有现成的插件供大家使用。但我们自己动手做一些小小的前端效果也是一个不错的选择，今天无忧主机(wwww.51php.com)小编就给大家介绍一下如何使用jQuery实现当前页面相关联的菜单项高亮。当然导入js和css都是在模版的<head></head>中实现的，而我们要使用jQuery就要导入jQuery的基础库文件，推荐导入第三方的jQuery基础库（详情见：“如何加载谷歌在线jQuery库文件”）。现在我们就来看看如何实现吧。引入jQuery库之后我们就开始导入我们自定义的js文件，内容如下：

<script type="text/javascript">
 <!--
$(function(){
 var myNav = $("#nav a"),i;
  for(i=0;i<myNav.length;i++){
    var links = myNav.eq(i).attr("href"),myURL = document.URL;
     if(myURL.indexOf(links) != -1) {
       myNav.eq(i).attr('class','51php');
     }
  }
})
 //-->

而css文件的话只需要一句 .51php{/*当前页面的高亮效果的样式*/} 而下面我们就做一个实例的html代码部分来试试效果吧。

<div id="nav">
<ul>
<li><a href="file:///G:/1.html" title="资讯中心"><span>资讯中心</span></a></li>
<li><a href="file:///G:/1.html" title="网络编程"><span>网络编程</span></a></li>
<li><a href="file:///D:/Program%20Files/Tencent/QQ/Users/283608980/FileRecv/2.html" title="数据库"><span>数据库</span></a></li>
</ul>
</div>

作为放在php虚拟主机开源程序的话，我们只要使用ftp登录到php空间的根目录结构下找到相关联主题的header.php文件，导入js和css文件后就传回空间就大功告成啦！还有的站长就问了—为什么不直接用javascript实现呢？其实原因很简单，jQuery做为一款优秀的js库，极大的简化了js的编写难度和js在不同浏览器下的兼容问题。就冲着这一点，难道我们不应该好好使用它吗？js文件在各浏览器下不兼容的的问题，这个历来都是很多站长头疼的问题。感谢无忧主机用户赣州—老白提供协助！纯Linux环境下高端免备案【香港独立IP地址】 php空间，仅仅只需199元一年起。商务中国域名核心代理直销50元注册国际顶级域名

本文地址：https://www.51php.com/others/7707.html

上一篇: 如何加载谷歌在线jQuery库文件
下一篇: 怎样让Ecshop后台上传商品默认下架