新聞中心

jQuery實(shí)現(xiàn)當(dāng)前頁(yè)面菜單項(xiàng)高亮

作者 / 無(wú)憂(yōu)主機(jī) 時(shí)間 2012-08-22 06:30:08

如果你是一名技術(shù)性站長(zhǎng)，除了精通你使用的php開(kāi)源程序建站以外，建議你也要多多接觸一下網(wǎng)站的前端技術(shù)，雖然說(shuō)作為開(kāi)源系統(tǒng)很多的前端效果都有現(xiàn)成的插件供大家使用。但我們自己動(dòng)手做一些小小的前端效果也是一個(gè)不錯(cuò)的選擇，今天無(wú)憂(yōu)主機(jī)(wwww.love62.cn)小編就給大家介紹一下如何使用jQuery實(shí)現(xiàn)當(dāng)前頁(yè)面相關(guān)聯(lián)的菜單項(xiàng)高亮。當(dāng)然導(dǎo)入js和css都是在模版的<head></head>中實(shí)現(xiàn)的，而我們要使用jQuery就要導(dǎo)入jQuery的基礎(chǔ)庫(kù)文件，推薦導(dǎo)入第三方的jQuery基礎(chǔ)庫(kù)（詳情見(jiàn)：“如何加載谷歌在線(xiàn)jQuery庫(kù)文件”）。現(xiàn)在我們就來(lái)看看如何實(shí)現(xiàn)吧。引入jQuery庫(kù)之后我們就開(kāi)始導(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文件的話(huà)只需要一句 .51php{/*當(dāng)前頁(yè)面的高亮效果的樣式*/} 而下面我們就做一個(gè)實(shí)例的html代碼部分來(lái)試試效果吧。

<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ù)庫(kù)"><span>數(shù)據(jù)庫(kù)</span></a></li>
</ul>
</div>

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

本文地址：http://www.love62.cn/others/7707.html

上一篇: 如何加載谷歌在線(xiàn)jQuery庫(kù)文件
下一篇: 怎樣讓Ecshop后臺(tái)上傳商品默認(rèn)下架