求一个JS。主要是用来在导航上做点击后背景图片停留

本人是菜鸟，只能说自己思路，却写不出来。
导航格局
<div id="nav">
  <ul>
    <li><a href="">$$$1</a></li>
    <li><a href="">##2</a></li>
    <li><a href="">##3</a></li>
    <li><a href="">##4</a></li>
  </ul>
</div>
我想要的效果：
1.当点击其中某一个 li 的时候添加一个 class（假设为：bg2）上去。
2. 点击另一个 li 的时候当前 li 添加同一个 class （bg2），同时在之前点击过的 li 上的 class 移除。
由于我水平有限虽然很简单但似乎我还真写不出来所以来求救了

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <style>
        .bg2
        {
            background: red;
        }
    </style>
    <script>
        $(function () {
            $('li').click(function () {
                $('li').removeClass('bg2');
                $(this).addClass('bg2');            })
        })
    </script>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#">$$$1</a></li>
            <li><a href="#">##2</a></li>
            <li><a href="#">##3</a></li>
            <li><a href="#">##4</a></li>
        </ul>
    </div>
</body>
</html>
象这样？！
应该还有一个判断：页面初始化时的class停留状态。
忘了一个了怎么定位在 id=“nav” 的这个 div 下面呢
怎么定位在  nav 这个 id 下面呢  还一个判断就是初始阶段停留在第一个li 上面
楼主的li里是A，点击后页面就跳转了，所以加到click上没有意义，
而如果是要hover 效果，直接加到A的CSS样式上就行了
例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>导航背景改变</title>
  <style type="text/css" >
  *{ padding:0;margin:0;}
  #nav { height:26px;  overflow:hidden;}
  #nav li{ float:left;}
   #nav a:hover, #nav a:cur{
   background-color:Red;
  }
  </style>


</head>
<body>
  <div id="nav">
  <ul>
  <li><a href="#" class="cur">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">关于</a></li>
  </ul>
  </div>
</body>
</html>
css 写错了#nav a:cur{
应该是#nav a.cur{
$(function () {
$('#nav li').click(function () {
      $('li').removeClass('bg2');
      $(this).addClass('bg2');
})
$('#nav ul li:first-child').addClass('bg2');//默认背景
})