jQuery動態(tài)添加.active如何實(shí)現(xiàn)導(dǎo)航效果

這篇文章給大家分享的是有關(guān)jQuery動態(tài)添加.active如何實(shí)現(xiàn)導(dǎo)航效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)，集網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營銷、軟文營銷等專業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計(jì)，讓網(wǎng)站在運(yùn)行后，在搜索中有好的表現(xiàn)，專業(yè)設(shè)計(jì)制作為您帶來效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

代碼思路:

頁面4:

頁面5:

jQuery動態(tài)添加.active如何實(shí)現(xiàn)導(dǎo)航效果

代碼思路:

通過jq獲取你打開頁面的鏈接 window.location.pathname；

在HTML中給自己的li加入一個ID id的命名與網(wǎng)址鏈接中的href相同

通過jq包含方法找到相對應(yīng)的li給他加入active類名

然后。。就沒有然后了。。。

jq代碼：

$(function () {
 var li = $(".title_ul").children("li");
 for (var i = 0; i < li.length; i++) {
 var url = window.location.pathname;
 var url = url.replace("/", "");
 if (url.indexOf(li[i].id)!=-1) {
  li[i].firstChild.className = "active";

 } else {
  li[i].firstChild.className = "";
 }
 }
})

html代碼：

<body>
<div class="title">
 <ul class="title_ul">
 <li id="index"><a href="index.html" rel="external nofollow" class="">頁面1</a></li>
 <li id="zf"><a href="zf.html" rel="external nofollow" class="">頁面2</a></li>
 <li id="gc"><a href="gc.html" rel="external nofollow" class="">頁面3</a></li>
 <li id="hc"><a href="hc.html" rel="external nofollow" class="">頁面4</a></li>
 <li id="shwt"><a href="shwt.html" rel="external nofollow" class="">頁面5</a></li>
 </ul>
</div>
</body>

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。

感謝各位的閱讀！關(guān)于“jQuery動態(tài)添加.active如何實(shí)現(xiàn)導(dǎo)航效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)站名稱：jQuery動態(tài)添加.active如何實(shí)現(xiàn)導(dǎo)航效果
地址分享：http://bm7419.com/article34/pcesse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站維護(hù)、、移動網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、營銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容