用query就可以简单的实现 点击li标签设置active。
<script data-require=”jquery” data-semver=”3.0.0″ src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js”></script>
<script type= “text/javascript” >
$(function(){
$(“li”).click(
function(event) {
$(‘li’).removeClass(‘active’)
$(event.target.parentNode).addClass(‘active’)
}
);
});
</script>
参考如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script type= "text/javascript" >
$(function(){
$("li").click(
function(event) {
$('li').removeClass('active')
$(event.target.parentNode).addClass('active')
}
);
});
</script>
</head>
<body>
<style>
.header-menu {
text-align:center;
margin-left:50px;
}
.header-menu>ul>li {
position:relative;
padding:0 25px;
float:left;
height:30px;
line-height:30px;
display:inline;
}
.header-menu>ul>li>a {
position:relative;
display:inline;
font-size:16px;
text-align:center
}
.active{
color:white;
display: block;
background-color: #1e52d8;
}
</style>
<div class="header-menu ">
<ul>
<li id="1" ><a> Home</a></li>
<li id="2"><a > Product</a></li>
<li id="3"><a> Service</a></li>
<li id="4"><a> About</a></li>
</ul>
</div>
</body>
</html>
