javascript實現(xiàn)當前頁導航激活的方法
更新時間：2015年02月27日 09:17:50 作者：代碼家園
這篇文章主要介紹了javascript實現(xiàn)當前頁導航激活的方法,涉及javascript操作css的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了javascript實現(xiàn)當前頁導航激活的方法。分享給大家供大家參考。具體如下：
html部分（引用的導航，不可用#代替鏈接，測試可以新建幾個靜態(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部分（給當前頁面指定導航加了.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è)計有所幫助。
相關(guān)文章
正則表達式是用于匹配字符串中字符組合的模式,下面這篇文章主要給大家介紹了一次JavaScript正則的詭異經(jīng)歷記錄,文中通過實例介紹的非常詳細,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了javascript正則表達式定義,對于JavaScript正則表達式的語法進行了總結(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中定義變量需要指定標識符的類型,下面這篇文章主要給大家介紹了關(guān)于TypeScript中class類型的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
比較詳細的實例分析了dom的一些常用方法2008-09-09
這篇文章主要介紹了js跨域請求數(shù)據(jù)的3種常用的方法，需要的朋友可以參考下2015-12-12
用JS判別瀏覽器種類以及IE版本的幾種方法小結(jié)，需要的朋友可以參考下。2011-08-08
這篇文章主要介紹了使用JS獲取當前地理位置方法匯總,需要的朋友可以參考下2014-12-12
JavaScript異步操作的幾種常見處理方法實例總結(jié)
這篇文章主要介紹了JavaScript異步操作的幾種常見處理方法,結(jié)合實例形式總結(jié)分析了JavaScript常見的異步操作處理方法相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下2020-05-05