<!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>为当前页面添加状态效果，例如跳转到该页面，页面上方对应的导航栏添加样式
猜你喜欢
转载自blog.csdn.net/qq_37815596/article/details/83184056
今日推荐
周排行