鼠标点击 切换li样式

<li ><a  href="#" >违章查询</a></li>
 <li ><a  href="#" >注意事项</a></li>
基础代码为上，我想实现，点击 注意事项，‘注意事项’的样式就变为  ndj  ； 鼠标离开'注意事项'，样式变为'wdj'；同样，点击违章查询，样式变为 ndj ，鼠标离开，变为  wdj

解决方案 »

  1.   

    $("li").click(function(){
      $(this).attr("class","ndj");
    }).mouseout(function(){
      $(this).attr("class","wdj");
    })
      

  2.   


    <script language="javascript">
    $("li").click(function(){
      $(this).attr("class","ndj");
    }).mouseout(function(){
      $(this).attr("class","wdj");
    })</script>
    <style>
    /*切换按钮*/
    li{ display:inline}
    .ndj{ background:#000}
    .wdj{ background:#FFF}</style>
     <li ><a  href="#" >违章查询</a></li>
     <li ><a  href="#" >注意事项</a></li>不行呢，，
      

  3.   


    <html>
    <script type="text/javascript" src="/js/jquery-1.4.2.js" ></script>
    <script language="javascript">
    $("li").click(function(){
      $(this).addClass("ndj");
    }).mouseout(function(){
      $(this).removeClass("ndj").addClass("ndj");
    })</script>
    <style>
    /*切换按钮*/
    li{ display:inline}
    .ndj{ background:#000}
    .wdj{ background:#FFF}
     
    </style>
     <li ><a  href="#" >违章查询</a></li>
     <li ><a  href="#" >注意事项</a></li>
    </html>有时候感觉 attr 不好用，楼主要引入jquery的js
      

  4.   


    <!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="../js/jquery-1.4.2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("li").click(function () {
                    $(this).attr("class", "ndj");
                }).mouseout(function () {
                    $(this).attr("class", "wdj");
                })        })    </script><style type="text/css">
    /*切换按钮*/
    li{ display:inline}
    .ndj{ background:#000}
    .wdj{ background:#FFF}
     
    </style>
    </head>
    <body>
    <ul>
     <li><a  href="#" >违章查询</a></li>
     <li><a  href="#" >注意事项</a></li>
     </ul>
     </body>
    </html>刚试了一下， 这个可以，引入jQuery就可以了