靜態頁面 用js實現導航欄變換背景

注：此種方法適用於五種情況
1.http://www.baidu.com
2.http://www.baidu.com/
3.http://www.baidu.com/index.html ;
4.http://www.baidu.com/newsinfo_123.html
5.http://www.baidu.com/admin/index123.html

<ul id="menu">

     <li id="index"><a href="/">公司首頁</a></li>

     <li id="gsjj"><a href="gsjj.html">企業簡介</a></li>

     <li id="jsld"><a href="jsld.html">技術亮點</a></li>

     <li id="bssm"><a href="bssm.html">本所聲明</a></li>

     <li id="gsry"><a href="gsry.html">公司榮譽</a></li>

     <li id="cpzs"><a href="cpzs.asp">產品展示</a></li>

     <li id="zsjm"><a href="zsjm.html">招商加盟</a></li>

     <li id="fzjx"><a href="fzjx.html">輔助機械</a></li>

     <li id="qtxm"><a href="qtxm.html">其他項目</a></li>

     <li id="lxwm"><a href="lxwm.html">聯繫方式</a></li>

</ul>

<style type="text/css">
    

    /*menu開始*/

    .menu{ height:41px; background:#007CE1;}

    .menu ul li{ width:98px; float:left; text-align:center; height:41px; line-height:41px!important; line-height:41px;}

    .menu ul li a{ display:block; color:#FFF; font-size:16px; font-weight:bold;}

    .menu ul li:hover{background:#ffa903;}

    /*menu結束*/ 
</style>

 

<!-- 靜態頁面 導航欄變換背景 -->

<script type="text/javascript">

var thisUrl=window.location.pathname; //獲取當前頁面url中域名後的值

var gangIndex=thisUrl.lastIndexOf("/");//獲取最後一個“/”的下標

var dianIndex=thisUrl.lastIndexOf(".");//獲取最後一個“.”的下標

var subUrl=thisUrl.substring(gangIndex+1,dianIndex);//取最後一個“/”和最後一個“.”之間的內容

//alert(gangIndex);

//alert(dianIndex);

//alert(subUrl);

document.getElementById("index").style.backgroundColor="#007CE1";//定id爲index的背景顏色爲藍色（消除黃色）
 

if(thisUrl==""){   // 當直接用域名訪問（瀏覽器默認不帶"/"）時

document.getElementById("index").style.backgroundColor="#ffa903";//定id爲index的背景顏色爲黃色（消除藍色）

}
 

if(gangIndex==0&&dianIndex<gangIndex){ // 當直接用域名訪問（瀏覽器默認生成"/"）時,http://www.baidu.com/

        document.getElementById("index").style.backgroundColor="#ffa903";// 定id爲index的背景顏色爲黃色（背景顏色）

}else if(subUrl.indexOf("newsinfo") >= 0 ){ // 當頁面爲newsinfo頁的時

        document.getElementById("index").style.backgroundColor="#ffa903";// 定id爲index的背景顏色爲黃色（背景顏色）

    

}else{

        document.getElementById(subUrl).style.backgroundColor="#ffa903";// 根據獲取的subUrl，修改相同id的背景顏色

}

</script>