求一个点击变换背景图片css的菜单导航。。。。。

求一个点击变换背景图片css的菜单导航。。

解决方案 »

  1.   

    用jquery：<style type="text/css"> 
      .picture
       {
         float:left;
     margin:2px;
         width:50px;
         border:1px solid #D7D7D7;
     background-color:#ff0000 ;
     background-image: url(images/1.png);   }
      .spicture
      {
         float:left;
         margin:2px;
         width:50px;
         border:3px solid #00a2ff;
     background-color:#0000ff ;
     background-image: url(images/3.jpg);
      }</style>
    <script type="text/javascript">
    $(function(){
      $(".picture").bind("mouseover",
      function()
      {
        $(this).addClass("spicture");//追加样式
      }
      );
      $(".picture").bind("mouseout",
      function()
      {
        $(this).removeClass("spicture");//删除样式
      }
      );
    });</script><title>无标题文档</title>
    </head><body style="overflow:hidden;"><h4>菜单切换效果</h4>
    <div>
     <div  class="picture">菜单1</div>
     <div  class="picture">菜单2</div>
     <div  class="picture">菜单3</div>
     <div  class="picture">菜单4</div>
     </div>
      

  2.   

     $(".picture").bind("click",
      function()
      {
      $(this).addClass("spicture");//追加样式
      }
      );
      

  3.   

    汗，汗，汗把mouseover改成onclick不就好了嘛
      

  4.   

     $(".picture").bind("mouseover",
      function()
      {
        $(this).toggleClass("spicture");//追加样式
    $(this).siblings().each(function(){
    $(this).removeClass("spicture");
    });
      }
      );
    });
      

  5.   

     $(".picture").bind("mouseover",
      function()
      {
        $(this).toggleClass("spicture");//追加样式
    $(this).siblings().each(function(){
    $(this).removeClass("spicture");
    });
      }
      );
    });
      

  6.   

    用 JS 鼠标 Click 事件，每次触发事件更改对应写好的 ClassName (图片的更改你用不同的 ClassName 即可)
      

  7.   

    这里是换背景颜色,如果背景是图片的话,将background:url('xx.jpg') 中的url换掉就行了
    如果你想点击改变本次背景而不将上次点击的背景换掉的话,将$(this).siblings('.click').removeClass('click');注释掉
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="C:\Documents and Settings\samsung\My Documents\jquery-1.4.2.js"></script>
    <style type="text/css">
    ul li{float:left;width:80px;height:25px;background:#e8e8e8;padding:5px;margin-left:5px;text-align:center;font-size:15px;font-weight:bold;}
    .click{background:#e3fdb5;}
    </style>
    </head><body>
    <ul>
    <li>首页</li>
    <li>电视剧</li>
    <li>电影</li>
    <li>综合</li>
    <li>音乐</li>
    <li>动漫</li>
    </ul>
    </body>
    <script language="javascript">
    $('ul li').click(function(){
    // 增加点击样式
    $(this).addClass('click');
    // 清除其它样式
    $(this).siblings('.click').removeClass('click');
    });
    </script>
    </html>