新聞中心

jQuery實現(xiàn)當前頁面菜單項高亮

作者 / 無憂主機時間 2012-08-22 06:30:08

如果你是一名技術(shù)性站長，除了精通你使用的php開源程序建站以外，建議你也要多多接觸一下網(wǎng)站的前端技術(shù)，雖然說作為開源系統(tǒng)很多的前端效果都有現(xiàn)成的插件供大家使用。但我們自己動手做一些小小的前端效果也是一個不錯的選擇，今天無憂主機(wwww.gle-technology.com)小編就給大家介紹一下如何使用jQuery實現(xiàn)當前頁面相關(guān)聯(lián)的菜單項高亮。當然導(dǎo)入js和css都是在模版的<head></head>中實現(xiàn)的，而我們要使用jQuery就要導(dǎo)入jQuery的基礎(chǔ)庫文件，推薦導(dǎo)入第三方的jQuery基礎(chǔ)庫（詳情見：“如何加載谷歌在線jQuery庫文件”）。現(xiàn)在我們就來看看如何實現(xiàn)吧。引入jQuery庫之后我們就開始導(dǎo)入我們自定義的js文件，內(nèi)容如下：

<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="網(wǎng)絡(luò)編程"><span>網(wǎng)絡(luò)編程</span></a></li>
<li><a href="file:///D:/Program%20Files/Tencent/QQ/Users/283608980/FileRecv/2.html" title="數(shù)據(jù)庫"><span>數(shù)據(jù)庫</span></a></li>
</ul>
</div>

作為放在php虛擬主機開源程序的話，我們只要使用ftp登錄到php空間的根目錄結(jié)構(gòu)下找到相關(guān)聯(lián)主題的header.php文件，導(dǎo)入js和css文件后就傳回空間就大功告成啦！還有的站長就問了—為什么不直接用javascript實現(xiàn)呢？其實原因很簡單，jQuery做為一款優(yōu)秀的js庫，極大的簡化了js的編寫難度和js在不同瀏覽器下的兼容問題。就沖著這一點，難道我們不應(yīng)該好好使用它嗎？js文件在各瀏覽器下不兼容的的問題，這個歷來都是很多站長頭疼的問題。感謝無憂主機用戶贛州—老白提供協(xié)助！純Linux環(huán)境下高端免備案【香港獨立IP地址】 php空間，僅僅只需199元一年起。商務(wù)中國域名核心代理直銷50元注冊國際頂級域名

本文地址：http://www.gle-technology.com/others/7707.html

上一篇: 如何加載谷歌在線jQuery庫文件
下一篇: 怎樣讓Ecshop后臺上傳商品默認下架