为当前页面添加状态效果，例如跳转到该页面，页面上方对应的导航栏添加样式

小鱼儿 2022-05-11 11:12 127阅读 0赞

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