前端 js 调试的方法

最新推荐文章于 2024-11-05 16:02:39 发布

羽二

最新推荐文章于 2024-11-05 16:02:39 发布

阅读量377

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_34963461/article/details/52651359

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

首先是一个简单的导航条

<!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);

这几行代码会在打开的ｈｔｍｌ界面　浏览器里面的调试栏里面打印出变量内容