<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
a,a:hover{
text-decoration: none;
}
ul li{
float: left;
line-height: 40px;
margin: 0 10px;
}
ul li:hover{
border-bottom: 2px solid red;
}
.current{
border-bottom: 2px solid red;
}
ul li a{
display: block;
background-color: #fcf;
padding: 0 10px;
}
</style>
</head>
<body>
<ul>
<li class="current"><a href="">首页</a></li>
<li><a href="">服务</a></li>
<li><a href="">流程</a></li>
<li><a href="">作品</a></li>
<li><a href="">联系</a></li>
</ul>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function(){
$("ul li").on("click",function(){
$(this).addClass("current").siblings().removeClass("current");
})
})
</script>
</body>
</html>
UYOU