1. 程式人生 > >靜態頁面中導航切換時的當前狀態(四中方法)

靜態頁面中導航切換時的當前狀態(四中方法)

HA 靜態頁 () ctype urn ren -- func class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>導航當前狀態</title>
    <script src="jquery-1.8.2.min.js"></script>
</head>
<body onload="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>

靜態頁面中導航切換時的當前狀態(四中方法)