首先是一个简单的导航条
<!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);
这几行代码会在打开的html界面 浏览器里面的调试栏里面打印出变量内容