首先是一個簡單的導航條<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首頁</title> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/nav.js"></script> <link rel="stylesheet" type="text/css" href="style/webstyle.css"/> </head> <body> <div class="nav"> <ul class="list"> <li><a href="index.html">首頁</a></li> <li><a href="zhiye.html">職業課程</a></li> <li><a href="jiuye.html">就業學習</a></li> <li><a href="bbs.html">極客社區</a></li> <li><a href="jike.html">極客+</a></li> </ul> </div> <h1>首頁</h1> </body> </html>
然後是css
*{padding:0; margin:0;}
li{ list-style:none;}
a{ text-decoration:none}
.nav{ width:100%; height:40px; background:#222; margin-top:100px;}
.list{ width:1000px; height:40px; margin:0 auto;}
.list li{ float:left;}
.list li a{ color:#aaa; padding:0 30px; line-height:40px; display:block;}
.list li a:hover{ background:#333; color:#fff;}
.list li a.on{background:#333; color:#fff; }
h1{ text-align:center;padding:100px 0;}
最後是jq
$(function(){ var index=window.location.href.split("/").length-1; var href=window.location.href.split("/")[index].substr(0,4); console.log(window.location.href.split("/")); console.log("indexa"); console.log(index); console.log("href"); console.log(href); //alert(index); //alert(href); if(href.length>0){ $(".list li a[href^='"+href+"']").addClass("on") }else{ $(".list li a[href^='index']").addClass("on") } })
然後我們可以看到在jq文件裏寫如的代碼
console.log(window.location.href.split("/")); console.log("indexa"); console.log(index); console.log("href"); console.log(href);
這幾行代碼會在打開的ｈｔｍｌ界面 瀏覽器裏面的調試欄裏面打印出變量內容
