當前位置：
首頁 >
静态页面中导航切换时的当前状态（四中方法）
發布時間：2025/7/25
59
豆豆
生活随笔
收集整理的這篇文章主要介紹了
静态页面中导航切换时的当前状态（四中方法）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>導航當前狀態</title><script src="jquery-1.8.2.min.js"></script>
</head>
<body οnlοad="s35()">
<div ></div><script>//第一種方法：給當前頁面導航添加class//優點：適用于每個頁面//缺點：每個也頁面都要聲明ID(secondId),頁面很多時，代碼量大function s35() { document.getElementById('dhnews').className = "xz"; }//第二種方法：給當前頁面設置ID,通過ID獲取對應的索引值。為當前頁面導航添加class//優點：適用于每個頁面//缺點：每個也頁面都要聲明ID(secondId),頁面很多時，代碼量大var secondId = '16481';$("#cbg-main-nav").find("li").eq(topBottom(secondId)).addClass("current");function topBottom(secondId){switch(secondId){case '2613':return 0;case '2617':return 1;case '2622':return 4;case '16195':return 2;case '5712':return 4;case '2637':return 6;case '16481':return 3;}}//第三種方法：判斷當前導航鏈接與頁面鏈接//優點：可作為公共部分提出代碼//缺點：只適用于在菜單欄有入口的頁面$(document).ready(function(){$(".nav a").each(function(){$this = $(this);if($this[0].href==String(window.location)){$this.addClass("hover");}});});//第四種方法：判斷頁面鏈接與當前導航鏈接//優點：可作為公共部分提出代碼//缺點：只適用于在菜單欄有入口的頁面$(function () {var $SIDEBAR_MENU=$('#sidebar-menu');var CURRENT_URL = window.location.href.split('#')[0].split('?')[0];var pathName_URL = window.location.pathname.split('#')[0].split('?')[0]; //
$SIDEBAR_MENU.find("a").filter(function(){return this.href==CURRENT_URL}).addClass("current-page");//處理個別不在菜單中的頁面if(pathName_URL=="/gov/info/findInfoList" || pathName_URL=="/gov/info/findInfoById" || pathName_URL=="/gov/standard/findList"){$('#menu-article').find("a").addClass("current-page");}else if(pathName_URL=="/gov/transportCar/toByNo"){$('#js_to_list').find("a").addClass("current-page");}});</script><!--<div class="nav"><ul><li><a href="1.html"> 首頁</a></li><li><a href="2.html"> 個人資料</a></li><li><a href="3.html"> 我的好友</a></li><li><a href="4.html"> 消息管理</a></li></ul>
</div>--></body>
</html>
?
轉載于:https://www.cnblogs.com/hjbky/p/8649796.html
總結
以上是生活随笔為你收集整理的静态页面中导航切换时的当前状态（四中方法）的全部內容，希望文章能夠幫你解決所遇到的問題。
