页面跳转共用导航样式不变

页面跳转共用导航样式不变

scriprt部分

<script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.js"> //引入jquery

<script>

    $(document).ready(function(){
        $(".nav a").each(function(){
            $this = $(this);
            if($this[0].href==String(window.location)){
                $this.addClass("hover");
            }
        });
    });
</script>

 原生js

        <script>
            window.onload=function highThis(){highURL("nav","hover");}
            function highURL(nav,classCur){
                if(!document.getElementById) return false;
                if(!document.getElementById(nav)) return false;
                if(!document.getElementsByTagName) return false;
                var menuId=document.getElementById(nav);
                var links=menuId.getElementsByTagName("a");
                for(var i=0; i<links.length; i++ ){
                    var menuLink=links[i].href;
                    var currentLink=window.location.href;
                    if(currentLink.indexOf(menuLink)!=-1){
                        links[i].className=classCur;
                    }
                }
            }

                   </script>

 

HTML部分

<div class="nav" id="nav">
    <ul>
        <li><a href="link.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>

CSS  部分

    *{margin: 0;padding: 0}
    li,ol{list-style:none;}

    a{text-decoration:none;color:#337782;}
    .nav li{list-style: none;float: left;margin-left: 20px;padding: 5px;}
    .nav li .hover{border-bottom: solid 2px #00b5d2}