為當前頁面新增狀態效果,例如跳轉到該頁面,頁面上方對應的導航欄新增樣式
阿新 • • 發佈:2018-11-29
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} a{color: #000;font-size: 20px;padding: 0px;text-decoration: none;} ul{list-style: none;} li{margin-left: 2%;padding-top: 3.27350427350427%;padding-bottom: 2.846153846153846%;padding-left: 4px;padding-right: 4px;float: left;} li.a-active{background-color:#1da838;transform:skewX(-10deg)} li.a-active>a{color:#fff;border-radius:0px;background-color:#1da838;transform:skewX(10deg)} </style> </head> <body> <ul id="menu-ul"> <li class="nav-list"> <a target="_self" href="#">導航欄1</a> </li> <li class="nav-list"> <a target="_self" href="#">導航欄1</a> </li> <li class="nav-list"> <a target="_self" href="#">導航欄1</a> </li> <li class="nav-list"> <a target="_self" href="#">導航欄1</a> </li> <li class="nav-list"> <a target="_self" href="#">導航欄1</a> </li> </ul> <script> /****************當前頁著重顯示************************/ function oMenu(cLi,sClass){ var Whref=window.location.href; for(var k=0;k<cLi.length;k++){ cLi[k].index=k; } switch(true){ case Whref.indexOf("all")>-1: cLi[1].className+=" "+sClass; break; case Whref.indexOf("about")>-1: cLi[2].className+=" "+sClass; break; case Whref.indexOf("contact")>-1: cLi[3].className+=" "+sClass; break; default: cLi[0].className+=" "+sClass; } } (function(){ var MenuUl=document.getElementById("menu-ul"); var MenuLi=MenuUl.getElementsByClassName("nav-list"); oMenu(MenuLi,"a-active"); })(); </script> </body> </html>