求大神写一个鼠标点击导航背景停留的效果

鼠标导航

解决方案 »

  1.   

    <div class="pro_m_l fl">
                <div class="pro_m_l_t"><h3>产品</h3></div><br />
                <div id="mleft" class="pdleft">
                <div class="cplb">
                <ul class="cplb_nr">
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    <li key="33"><a href="#">222</a></li>
                    </ul>
                    
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                    
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                    
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                    
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                    
                     <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    </ul>
                    
                    </ul>
                </ul>
                </div>
                </div>
                </div>这是源码
      

  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>
    .cplb_nr h3.active{background:#ccc;color:#fff;}
    .cplb_nrsub li.active{background:yellow;color:#000;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
    $(function(){
    $('.cplb_nr h3').click(function(){
    $('.cplb_nr h3').removeClass('active');
    $(this).addClass('active');
    $('.cplb_nrsub li').removeClass('active');
    });
    $('.cplb_nrsub li').click(function(){
    $(this).parent().find('li').removeClass('active');
    $(this).addClass('active');
    });
    })
    </script>
    </head><body>
    <div class="pro_m_l fl">
                <div class="pro_m_l_t"><h3>产品</h3></div><br />
                <div id="mleft" class="pdleft">
                <div class="cplb">
                <ul class="cplb_nr">
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    <li key="33"><a href="#">222</a></li>
                    </ul>
                    
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                    
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                    
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                    
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                    
                     <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    </ul>
                    
                    </ul>
                </ul>
                </div>
                </div>
                </div>
    </body>
    </html>
      

  3.   


    <style>
    .on{color:white;background:blue;}
    </style><script>
    $(document).ready(function(){
    var $wrap = $("#mleft");
    var $parents = $wrap.find("h3");
    var $children = $wrap.find("li");$parents.click(function(){
    $parents.removeClass("on");
    $(this).addClass("on");
    });$children.click(function(){
    $parents.removeClass("on");
    var $ul = $(this).parent();
    $ul.prev().addClass("on");
    $ul.find("li").removeClass("on");
    $(this).addClass("on");
    });
    });
    </script>大概是这样，手写，木有测试。
      

  4.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
        <title></title>    <script>
            $(function () {
                $(".cplb_nr1").click(
                    function () {
                        $(".cplb_nr1").css("color", "blue");
                        $(this).css("color", "red");
                    }
                )            $(".cplb_nrsub li a").click(
                        function () {
                            $(".cplb_nrsub li a").css("color", "blue");
                            $(this).css("color", "red");
                        }
                    )
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
       <div class="pro_m_l fl">
                <div class="pro_m_l_t"><h3>产品</h3></div><br />
                <div id="mleft" class="pdleft">
                <div class="cplb">
                <ul class="cplb_nr">
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    <li key="33"><a href="#">222</a></li>
                    </ul>
                     
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">222</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                     
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">333</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                     
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">444</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                     
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">555</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                     
                     <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    </ul>
                     
                    </ul>
                </ul>
                </div>
                </div>
                </div>
        </form>
    </body>
    </html>
      

  5.   

    大神 我复制代码以后 没效果呀你jquery地址不对，改成你自己的啊
      

  6.   

    大神 我复制代码以后 没效果呀你jquery地址不对，改成你自己的啊我再网上直接下了一个jquery-1.4.1.min  地址改完了 还是不行
      

  7.   

    <!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>
    .cplb_nr h3.active{background:#ccc;color:#fff;}
    .cplb_nrsub li.active{background:yellow;color:#000;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
    $(function(){
    $('.cplb_nr h3').click(function(){
    $('.cplb_nr h3').removeClass('active');
    $(this).addClass('active');
    $('.cplb_nrsub li').removeClass('active');
    });
    $('.cplb_nrsub li').click(function(){
    $('.cplb_nr h3').removeClass('active');
    $('.cplb_nrsub li').removeClass('active');
    $(this).parent().prev().addClass('active');
    $(this).parent().find('li').removeClass('active');
    $(this).addClass('active');
    });
    })
    </script>
    </head><body>
    <div class="pro_m_l fl">
                <div class="pro_m_l_t"><h3>产品</h3></div><br />
                <div id="mleft" class="pdleft">
                <div class="cplb">
                <ul class="cplb_nr">
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    <li key="33"><a href="#">222</a></li>
                    </ul>
                    
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                    
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                    
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                    
                    <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    <li key="17"><a href="#">222</a></li>
                    </ul>
                    
                     <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                    <ul class="cplb_nrsub"  key="17" >
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    <li key="17"><a href="#">22</a></li>
                    </ul>
                    
                    </ul>
                </ul>
                </div>
                </div>
                </div>
    </body>
    </html>
      

  8.   

    大神 我复制代码以后 没效果呀你jquery地址不对，改成你自己的啊恩  我看到效果了  但是还是点击二级菜单  一级菜单那并没有标识