JS控制li,点击li时自动加上class

jsclass

解决方案 »

  1.   


            <script type="text/javascript">
            $('li').click(function(event) {
                /* Act on the event */
                 $('li').removeClass('current');
                 $(this).addClass('current');
            });
            </script>
      

  2.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    .current{
    color:#F00;
    }
    </style>
    </head><body>
    <ul>
    <li class="current"><a href="index.jsp">首页</a></li>
    <li><a href="user.jsp">用户</a></li>
    <li><a href="product.jsp">商品</a></li>
    <li><a href="searchOrder">订单</a></li>
    <li><a href="loadMessage">留言</a></li>
    <li><a href="loadNews">新闻</a></li>
    </ul>
    </body>
    <script type="text/javascript">
    window.onload=function(){
    var current=document.getElementsByTagName('li')[0];
    document.body.onclick=function(e){
    var a=e||window.event;
    var src=a.srcElement||a.target;
    src=src.parentNode;
    if(src.tagName.toLowerCase()=='li'){
    if(current){
    current.className='';
    }
    current=src;
    src.className='current';
    if(a.preventDefault){
    a.preventDefault();
    }else{
    a.returnValue=false;
    }
    }
    }
    }
    </script>
    </html>
      

  3.   

    [code=javascript]
            <script type="text/javascript">
            $('li').click(function(event) {
                /* Act on the event */
                 $('li').removeClass('current');
                 $(this).addClass('current');
            });
            </script>