js+css如果动态改变菜单的背景？？？

本帖最后由 dragon08 于 2012-08-17 19:16:08 编辑

解决方案 »

  1.   

    可以参考
    http://stackoverflow.com/questions/253689/switching-a-div-background-image-with-jquery用jquery库，大概代码是：
    $('ul li').each(function(){
      $(this).click(function(){
        $('ul li').css("background-image", "");//清空所有的背景
        $(this).css("background-image", "url(/myimage.jpg)");//当前按钮加背景
      });
    });
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta http-equiv="content-Type" content="text/html; charset=utf-8" /> 
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
     </head>
    <style type="text/css">ul li{float:left;display:block;margin-left:10px;padding:5px;border:1px solid gray;background:black;}
    ul li a{text-decoration:none;text-align:ceter;}
    ul li a:hover{background:blue;color:#fff;}</style>
     <body>
     <ul>
    <li><a href="#">首页</a></li>
    <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>
     </body>
    </html>
      

  3.   

    我下面的写法为什么没有生效呢？？？js：<script type="text/javascript">
    var obj = document.getElementById('ul').getElementsByTagName('li');
    for(var i=0;i<obj.length;i++){
    obj[i].onclick = new function(n){
    return function(){
    alert(n);alert(obj[n].innerHTML);
    obj[n].className = 'active11';
    }
    }(i);
    }
    </script>
    css：.active11{color:red; background-image: url(../img/menu_select.png); height:41px;width:91px;}
      

  4.   

    var obj = document.getElementById('ul').getElementsByTagName('li');
    应该是
    var obj = document.getElementsByTagName('ul')[0].getElementsByTagName('li');你用jquery的话2楼朋友的应该可以解决你的问题，如果你不用jquery的话：
    <script type="text/javascript">
    function EventListen(){
        var a = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
            for(var i=0;i<a.length;i++){
                a[i].onclick = function(){
                        SetBackGround(a,this);
                };
            }
    }
    function SetBackGround(a,b){
            for(var i=0;i<a.length;i++){
                b==a[i]?a[i].className = 'active11':a[i].className = '';
            }
    }
    EventListen();
    </script>代码应该置于页面下方，否则应该在body加上onload=“EventListen()”
      

  5.   

    js改成下面这样还是不行，单步跟踪，发现在执行js的时候，背景改变了，但执行到最外层的js代码后，页面好像刷新一样一闪，背景又没了。楼上的做法也是这样，而且是全部菜单背景都闪了一下，我下面的js只是我点击的菜单闪一下。各位大侠指点一下小弟啊，不胜感激！！！
    var obj = document.getElementById('ul').getElementsByTagName('li');
    for(var i=0;i<obj.length;i++){
    obj[i].onclick = new function(n){
    return function(){
    alert(n);alert(obj[n].id);
    obj[n].getElementsByTagName('a').className = 'active11';
    for(var j=0; j<obj.length;j++){
    if(j==n){
    obj[n].className = 'active11';
    }else{
    obj[n].getElementsByTagName('a').className = '.topmenu ul li a';
    }
    }alert(11);
    }
    }(i);
    }
      

  6.   

    呵呵，我IE6，7，8；FF，Safari浏览器下都测试过，没有问题。不知道你的环境，完整代码如下：
    <html>
    <head>
    <title>测试菜单选中事件</title>
    <style>
    .active11{color:red; background-image: url(a.gif); height:41px;width:91px;}
    </style></head><body onload>
    <div>
    <ul>
    <li>首页</li>
    <li>菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
    <li>菜单4</li>
    </ul>
    </div>
    <script type="text/javascript">
    function EventListen(){
        var a = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
            for(var i=0;i<a.length;i++){
                a[i].onclick = function(){
                        SetBackGround(a,this);
                };
            }
    }
    function SetBackGround(a,b){
            for(var i=0;i<a.length;i++){
                b==a[i]?a[i].className = 'active11':a[i].className = '';
            }
    }
    EventListen();
    </script>
    </body>
    </html>
      

  7.   

    我项目中实际的代码如下，请各位大侠帮忙看看哪里的问题？js有生效，到是一闪而过，最后背景还是没改变。js：<!--导航栏Begin-->
    <div class="menu body">
      <div class="menu_bg">
      
      <ul id="ul">
        <li class="thisclass" id="thisclass"><a href="${base}/" onclick="selected(this)">首 页</a> </li>
        
        <!--我这里栏目由后台管理，动态增加，数量不确定，所以这样循环从后台取数据出来-->
        [@my.List id='' inner='1';c]
        <li class="thisclass" id="thisclass">
         <a href="${c.url}" onclick="selected(this)">${c.name}</a>
        </li>
        [/@my.List]

        <li class="thisclass" id="thisclass">
         <a target="_blank" href="${base}/jeecms/Guestbook.jspx" name="aa" onclick="selected(this)">留言板</a>
        </li>
      </ul>
      
      </div>
    </div>
    <!--导航栏End--><script type="text/javascript">
    //$('#ul li').click(function(){
    // $(this).toggleClass('active');
    //});
    /*$('#ul').click(function(event){
    var e = e || event;
    var target = e.target || e.srcElement;
    $(target).toggleClass('active');
    if(target.nodeName.toLowerCase()=='a'){

    }
    });*/
    document.getElementById('media').className='active11';/*var obj = document.getElementById('ul').getElementsByTagName('li');
    for(var i=0;i<obj.length;i++){
    obj[i].onclick = new function(n){
    return function(){
    alert(n);alert(obj[n].id);
    obj[n].getElementsByTagName('a').className = 'active11';
    for(var j=0; j<obj.length;j++){
    if(j==n){
    obj[n].className = 'active11';
    }else{
    obj[n].getElementsByTagName('a').className = '.topmenu ul li a';
    }
    }alert(11);
    }
    }(i);
    }*/function eventListen(){
    var obj = document.getElementById('ul').getElementsByTagName('li');
    for(var i=0; i<obj.length; i++){
    obj[i].onclick = function(){
    setBackground(obj,this);
    };
    }
    }function setBackground(a,b){
    for(var i=0; i<a.length; i++){
    b=a[i]?a[i].className='active11':a[i].className='';
    }
    }eventListen();
    </script>css：/*导航栏布局Begin*/
    .menu {height: 41px;}
    .body {margin: 0px auto; width: 1000px; background-color: #ffffff;}
    .menu_bg{background: url(../img/menu_bg.png) repeat-x; height:34px;}
    .menu ul {font-weight: bold; font-size: 18px; overflow: hidden; width: 100%; height: 41px; padding-top:0px;}
    .menu ul li {width:92px; background: url(../img/head_0.png) no-repeat right; float: left;}
    .menu ul li a {width:92px; height: 31px; text-align:center; display: block; color: #000000; line-height: 31px; text-decoration:none;}
    .menu ul li a:hover {width:91px; height:41px; background: url(../img/menu_select.png) no-repeat center;  color: #cccccc; text-decoration:none;}
    .menu ul li a.thisclass {background: url(../img/menu_select.png) no-repeat center; color: #ffff00;}.active11{color:red; background-image: url(../img/menu_select.png) !important; height:41px !important;width:91px !important;}
    /*导航栏布局End*/
      

  8.   

    简单的ul li能实现，但套入我的实际代码中就不行了，不知道哪里的问题，麻烦大家指点一下。
      

  9.   

    你仔细看清楚：
    你写的是：b=a[i]?a[i].className='active11':a[i].className='';正确的是：
    b==a[i]?a[i].className='active11':a[i].className='';
      

  10.   

    补充一下：这个方法根本就是多余的，你的css样式表中已经定义好了对a标签的hover事件就是设置背景图，最原生的东东，不需要你来写什么js去定义
    .menu ul li a:hover {width:91px; height:41px; background: url(../img/menu_select.png) no-repeat center;  color: #cccccc; text-decoration:none;}
      

  11.   

    不考虑中间部分的不确定的菜单项，如下面，能实现我要的效果。
    <html>
    <head>
    <title></title>
    <style type="text/css">
    .menu {height: 41px;}
    .body {margin: 0px auto; width: 1000px; background-color: #ffffff;}
    .menu_bg{background: url(./img/menu_bg.png) repeat-x; height:34px;}
    .menu ul {font-weight: bold; font-size: 18px; overflow: hidden; width: 100%; height: 41px; padding-top:0px;}
    .menu ul li {width:92px; background: url(./img/head_0.png) no-repeat right; float: left;}
    .menu ul li a {width:91px; height: 31px; text-align:center; display: block; color: #000000; line-height: 31px; text-decoration:none;}
    .menu ul li a:hover {width:91px; height:41px; background: url(./img/menu_select.png) no-repeat center;  color: #cccccc; text-decoration:none;}
    .menu ul li a.thisclass {background: url(./img/menu_select.png) no-repeat center; color: #ffff00;}.active11{color:red; background-image: url(./img/menu_select.png) !important; height:41px !important;width:91px !important;}
    </style>
    </head><body>
    <!--导航栏Begin-->
    <div class="menu body">
      <div class="menu_bg">
      
      <ul id="ul">
        <li class="thisclass" id="thisclass"><a href="" onclick="selected(this)">首 页</a> </li>
        
        <!--我这里栏目由后台管理，动态增加，数量不确定，所以这样循环从后台取数据出来
        [@my.List id='' inner='1';c]
        <li class="thisclass" id="thisclass">
         <a href="" onclick="selected(this)">${c.name}</a>
        </li>
        [/@my.List]-->

        <li class="thisclass" id="thisclass">
         <a target="_blank" href="" name="aa" onclick="selected(this)">留言板</a>
        </li>
      </ul>
      
      </div>
    </div>
    <!--导航栏End--><script type="text/javascript">
    //$('#ul li').click(function(){
    // $(this).toggleClass('active');
    //});
    /*$('#ul').click(function(event){
    var e = e || event;
    var target = e.target || e.srcElement;
    $(target).toggleClass('active');
    if(target.nodeName.toLowerCase()=='a'){

    }
    });*/var obj = document.getElementById('ul').getElementsByTagName('li');
    for(var i=0;i<obj.length;i++){
    obj[i].onclick = new function(n){
    return function(){
    obj[n].getElementsByTagName('a').className = 'active11';
    for(var j=0; j<obj.length;j++){
    if(j==n){
    obj[j].className = 'active11';
    }else{
    obj[j].className = '.menu ul li a';
    }
    }
    }
    }(i);
    }
    /*
    function eventListen(){
    var obj = document.getElementById('ul').getElementsByTagName('li');
    for(var i=0; i<obj.length; i++){
    obj[i].onclick = function(){
    setBackground(obj,this);
    };
    }
    }function setBackground(a,b){
    for(var i=0; i<a.length; i++){
    b=a[i]?a[i].className='active11':a[i].className='';
    }
    }eventListen();*/
    </script>
    </body>
      

  12.   

    噢，怪我粗心了，看漏了一个“=”号谢谢 crying_boy ，你的写法也能实现。但是放在我的实际代码中就是不行，我再看看是什么问题了，哪位大侠看出问题的也欢迎指点一下小弟。
      

  13.   

    hover事件只是鼠标移动到那个菜单上面的时候，改变样式，这个是没问题的。现在我要的是点击了菜单后，那个菜单加背景，突出显示，以区别于其他菜单。