选中的状态保存的问题

<li class="main_2">
<a href="####" id="menus_2" ><img src="img/b_2_03.png" width="18" height="20" align="middle"/>人员管理</a>
<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>
</li>当我选择 售点管理的时候  我在CSS里定义了个 属性.main_2 ul li a:active{background-image: url(../img/sub-menu-fouce-bg_03.jpg);}这样 我每点击下 li>ul>li>a标签的时候  都会让选中的并且有背景图片 
但是现在问题也出来了 虽然它可以选中 但是 并不能保持状态  我一点击到 空白处的时候它就会把样式消失了
所以想问下 如何能保持这种样式  而且li>ul>li>a标签替换的时候样式并不重复。
或者用 Jquery 怎么实现。。

解决方案 »

  1.   

    做个简单的例子给你<style type="text/css">
    .menu{
    width:200px;
    height:100px;
    background:#FFFFCC;
    border:1px solid red;
    }
    </style>
    <body>
    <ul>
    <li><a class="menu">我是A标记1</a></li>
    <li><a class="menu">我是A标记2</a></li>
    <li><a class="menu">我是A标记3</a></li>
    <li><a class="menu">我是A标记4</a></li>
    </ul>
    <script type="text/javascript">
    <!--//
    var $=function(o){return document.getElementsByTagName(o);};
    for(var i=0;i<$("a").length;i++){
    $("a")[i].onclick=function(){
    for(var i=0;i<$("a").length;i++){
    $("a")[i].style.background="#FFFFCC";
    }
    this.style.background="url(http://list.image.baidu.com/t/image_category/res/katong/Yang_Cong_Tou.jpg)";
    };
    }
    //-->
    </script>
      

  2.   

    have a try    $(".main_2 ul li a").click(function(){
            $(".main_2 ul li a").css("background-image","");
            $(this).css("background-image","url(../img/sub-menu-fouce-bg_03.jpg)");
        });