javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法
更新時(shí)間：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)航，不可用#代替鏈接，測(cè)試可以新建幾個(gè)靜態(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;
}
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- js+css實(shí)現(xiàn)導(dǎo)航效果實(shí)例
- js實(shí)現(xiàn)多選項(xiàng)切換導(dǎo)航菜單的方法
- JS實(shí)現(xiàn)仿京東淘寶豎排二級(jí)導(dǎo)航
- js選擇并轉(zhuǎn)移導(dǎo)航菜單示例代碼
- JavaScript欄目列表隱藏/顯示簡(jiǎn)單實(shí)現(xiàn)
- javascript 樹形導(dǎo)航菜單實(shí)例代碼
- javascript實(shí)現(xiàn)的鼠標(biāo)懸停時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條
- 利用javascript實(shí)現(xiàn)一些常用軟件的下載導(dǎo)航
- 用javascript來實(shí)現(xiàn)動(dòng)畫導(dǎo)航效果的代碼
- javascript實(shí)現(xiàn)的又一個(gè)不錯(cuò)的滑動(dòng)導(dǎo)航效果
相關(guān)文章
正則表達(dá)式是用于匹配字符串中字符組合的模式,下面這篇文章主要給大家介紹了一次JavaScript正則的詭異經(jīng)歷記錄,文中通過實(shí)例介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
javascript正則表達(dá)式定義（語法）總結(jié)
這篇文章主要介紹了javascript正則表達(dá)式定義,對(duì)于JavaScript正則表達(dá)式的語法進(jìn)行了總結(jié)分析,需要的朋友可以參考下2016-01-01
jquery的$(document).ready()和onload的加載順序
最近在改一個(gè)嵌入在frame中的頁面的時(shí)候，使用了jquery做效果，而頁面本身也綁定了onload事件。改完后，F(xiàn)irefox下測(cè)試正常流暢，IE下就要等個(gè)十幾秒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中定義變量需要指定標(biāo)識(shí)符的類型,下面這篇文章主要給大家介紹了關(guān)于TypeScript中class類型的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
javascript DOM實(shí)用學(xué)習(xí)資料
比較詳細(xì)的實(shí)例分析了dom的一些常用方法2008-09-09
js跨域請(qǐng)求數(shù)據(jù)的3種常用的方法
這篇文章主要介紹了js跨域請(qǐng)求數(shù)據(jù)的3種常用的方法，需要的朋友可以參考下2015-12-12
用JS判別瀏覽器種類以及IE版本的幾種方法小結(jié)，需要的朋友可以參考下。2011-08-08
這篇文章主要介紹了使用JS獲取當(dāng)前地理位置方法匯總,需要的朋友可以參考下2014-12-12
JavaScript異步操作的幾種常見處理方法實(shí)例總結(jié)
這篇文章主要介紹了JavaScript異步操作的幾種常見處理方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript常見的異步操作處理方法相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2020-05-05