请问该菜单如何在点击后保留在当前连接的样式

<style>
#header .menu{width:770px;float:left}
#header .navs{width:610px;height:10px;background:#24272f;float:right}
.nav {width:610px;margin:0 auto; position:relative;font-size:14px}
.nav  ul li {float:left;padding:0 15px;text-align:center;height:40px;line-height:40px;margin-top:25px}
.curBg { background:#8a0000;height:10px;position:absolute;top:0;width:68px;left:0px;}
.curDef{width:610px;height:10px;background:#24272f}
</style><script>
// JavaScript Document
$(document).ready(function(){
var $liCur = $(".nav ul li.cur"),
  curP = $liCur.position().left,
  curW = $liCur.outerWidth(true),
  $slider = $(".curBg"),
  $navBox = $(".nav");
 $targetEle = $(".nav ul li a"),
$slider.animate({
  "left":curP,
  "width":curW
});
$targetEle.mouseenter(function () {
  var $_parent = $(this).parent(),
_width = $_parent.outerWidth(true),
posL = $_parent.position().left;
  $slider.stop(true, true).animate({
"left":posL,
"width":_width
  }, "fast");
});
$navBox.mouseleave(function (cur, wid) {
  cur = curP;
  wid = curW;
  $slider.stop(true, true).animate({
"left":cur,
"width":wid
  }, "fast");
});
})</script> <div id="header">
    <div class="logo"><img src="images/logo.png" /></div>
    <div class="menu">
    <div style="width:610px;float:right">
     <!-- 代码 开始 -->
<div class="nav">
<div class="curDef"></div>
 <div class="curBg"></div>
    <ul>
        <li class="cur"><a href="#">首页</a></li>
        <li><a href="#">新闻中心</a></li>
        <li><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> 
   
    <div class="cls"></div>
</div>
<!-- 代码 结束 -->
</div>
    </div><!-- menu -->
  </div><!-- header-->