求一个导航代码效果,就是按下去就是变色那种

[vip212]

求一个导航代码效果,就是按下去就是变色那种,应该是jq来实现的
代码如下,html
<div id="nav">
<ul>
<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>

CSS
/**导航**/
#nav{width:1000px;margin:0 auto;}
#nav ul li {width:140px; float:left;font-size:14px; text-align:center; line-height:40px;z-index:9999; border-right: #09F solid 1px;}
#nav ul li a{color:#fff; display:block}
#nav ul li a:hover{background: #30F; font-weight:bold;}

不知怎么改才能有按下去就有颜色的以上代码松开鼠标就没效果了,,求像以下的代码
<script type="text/javascript" src="js/jquery.js"></script>
<script>$("#nav").addClass("hover")</script> 也不对
像这种

[slwsss]

#nav ul li a:active{background: #F00; }

[save4me]

点击查看在线演示 其实就是设置一个当前激活状态的css样式，在点击的时候，先移除当前处于激活样式的元素的激活状态样式，然后再在刚点击的元素加上激活状态样式。

$(function(){
    $('#nav a').click(function(){
        el = $(this);
        $('#nav a.active').removeClass('active');
        el.addClass('active');
    });
});

[哋岼線]

click事件后加入一个样式不就可以了，这么简单的事

[vblj]

css #nav ul li a.active{background: #30F; font-weight:bold;} <script type="text/javascript" src="js/jquery.js"></script> <script> $(function(){ $('#nav li').click(function(){ $(this).addClass('active').siblings().removeClass('active'); }); }) </script>

[竹贤侄]

这个怎么样？ http://www.htmljscss.com/Editor/3Z6P8V.html