javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法

更新時間：2015年02月27日 09:17:50 作者：代碼家園

這篇文章主要介紹了javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法,涉及javascript操作css的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法。分享給大家供大家參考。具體如下：

html部分（引用的導(dǎo)航，不可用#代替鏈接，測試可以新建幾個靜態(tài)頁面）

<ul id="nav">
<li><a href="/">首頁</a></li>
<li><a href="/category/html-css/">HTML/CSS</a></li>
<li><a href="/category/javascript/">JavaScript</a></li>
<li><a href="/category/seo/">SEO</a></li>
<li><a href="/category/front-end/">前端新聞</a></li>
</ul>

javascript部分（給當(dāng)前頁面指定導(dǎo)航加了.on的class）

$(function() {
var a1 = document.URL;
var a2 = $("#nav a");
for (var i = 0; i < a2.length; i++) {
if (a1.indexOf($(a2[i]).attr("href")) != -1) {
$(a2[i]).parent().addClass("on");
return;
}
}
$(a2[0]).parent().addClass("on");
})

css部分（可根據(jù)自己的需求做相關(guān)調(diào)整）

#nav li{
display:inline-block;
float:left;
text-align:center;
height:36px;
padding-left:4px;
line-height:36px;
background:url(images/nav.gif) no-repeat right bottom;
}
#nav li a{
display:block;
color:#777;
padding:0 15px 0 10px;
}
#nav li.on{
font-weight:bold;
background:url(images/nav.gif) no-repeat 0 0;
margin-left:-3px;
}
#nav li.on a{
background:url(images/nav.gif) no-repeat right 0;
}

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

一次JavaScript正則的詭異經(jīng)歷記錄
正則表達(dá)式是用于匹配字符串中字符組合的模式,下面這篇文章主要給大家介紹了一次JavaScript正則的詭異經(jīng)歷記錄,文中通過實(shí)例介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
javascript正則表達(dá)式定義（語法）總結(jié)
這篇文章主要介紹了javascript正則表達(dá)式定義,對于JavaScript正則表達(dá)式的語法進(jìn)行了總結(jié)分析,需要的朋友可以參考下
2016-01-01
jquery的$(document).ready()和onload的加載順序
最近在改一個嵌入在frame中的頁面的時候，使用了jquery做效果，而頁面本身也綁定了onload事件。改完后，F(xiàn)irefox下測試正常流暢，IE下就要等個十幾秒jquery的效果才出現(xiàn)，黃花菜都涼了。
2010-05-05
TypeScript使用vscode監(jiān)視代碼編譯的過程
這篇文章主要介紹了TypeScript使用vscode監(jiān)視代碼編譯,使用tsc 文件名稱可以將ts文件轉(zhuǎn)化為js文件，js文件可以引入在html文件中直接使用，需要的朋友可以參考下
2021-12-12
TypeScript中class類型實(shí)例講解
眾所周知在TypeScript中定義變量需要指定標(biāo)識符的類型,下面這篇文章主要給大家介紹了關(guān)于TypeScript中class類型的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
javascript DOM實(shí)用學(xué)習(xí)資料
比較詳細(xì)的實(shí)例分析了dom的一些常用方法
2008-09-09
js跨域請求數(shù)據(jù)的3種常用的方法
這篇文章主要介紹了js跨域請求數(shù)據(jù)的3種常用的方法，需要的朋友可以參考下
2015-12-12
用JS判別瀏覽器種類以及IE版本的幾種方法小結(jié)
用JS判別瀏覽器種類以及IE版本的幾種方法小結(jié)，需要的朋友可以參考下。
2011-08-08
使用JS獲取當(dāng)前地理位置方法匯總
這篇文章主要介紹了使用JS獲取當(dāng)前地理位置方法匯總,需要的朋友可以參考下
2014-12-12
JavaScript異步操作的幾種常見處理方法實(shí)例總結(jié)
這篇文章主要介紹了JavaScript異步操作的幾種常見處理方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript常見的異步操作處理方法相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下
2020-05-05