怎么实现栏目随点击变换背景色？

网页导航条有N个栏目，使用onMouseOver,onMouseOut可以实现鼠标移动某个栏目，该栏目会变颜色，但如何实现栏目随点击变换背景色
例如：鼠标点击A栏目后，A栏目颜色保持红背景色，其他栏目为蓝背景色；当鼠标点击B栏目后，B栏目颜色保持红背景色，而A栏目颜色恢复为和其他栏目一样的蓝背景色。

解决方案 »

  1.   

    onclick事件单击时.获取所有栏目.将背景改成蓝色.然后获取单击的栏目改成红色.
      

  2.   

    L@_@K<!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> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <style type="text/css">
    a {
    color: white;
    background-color: blue;
    }
      </style>
     </head> <body>
    <a href="#">A</a>
    <a href="#">B</a>
    <a href="#">C</a>
    <a href="#">D</a>
      <script type="text/javascript">
      <!--
    // 例如：鼠标点击A栏目后，A栏目颜色保持红背景色，其他栏目为蓝背景色；
    // 当鼠标点击B栏目后，B栏目颜色保持红背景色，而A栏目颜色恢复为和其他栏目一样的蓝背景色。
    var cLink = document.getElementsByTagName("a");
    var activeLink = null;
    for (var i=0; i<cLink.length; i++)
    {
    cLink[i].onclick = function() {
    if (activeLink != null)
    activeLink.style.backgroundColor = ""; activeLink = this; this.style.backgroundColor = "red";
    };
    }
      //-->
      </script>
     </body>
    </html>
      

  3.   

    使用3 楼 yixianggao 的方法，点击栏目，栏目一闪从红色又变回蓝色，并保持为蓝色。
      

  4.   

    http://www.nghd.biz看看是不是这种效果，我做的<style>
    .menu{ float:left; width:980px; height:31px; overflow:hidden;background:url(http://www.nghd.biz/images/menubg.png) no-repeat; padding-left:20px; padding-top:13px;}
    .menu li{ float:left; width:160px;}
    .menu li a,.menu li a:visited,.menu li a:active{ display:block; height:24px; line-height:24px;text-align:center;color:#FFF; text-decoration:none; font-size:15px; font-weight:bold;}
    .menu li a:hover{ text-decoration:none; color:#FF0;}
    #cur{ color:#FFFF00;  background:url(http://www.nghd.biz/images/index_menu_bg.png) no-repeat; font-size:15px; font-weight:bold;}
    </style>
    <div class=menu id=menu>
    <UL>
    <LI><A href="/index.html">首页</A></LI>
    <LI><A href="/TV/Index.html">电视栏目</A></LI>
    <LI><A href="/nghdw/index.html">红豆视频</A></LI>
    <LI><A href="/info/index.html">图文频道</A></LI>
    <LI><A href="/gb/index.html">广播在线</A></LI>
    <LI><A href="/zhuchi/index.html">主持风采</A></LI></UL></div>
    <script>
    var url="http://"+window.location.host+"/";//获取域名
    var local=window.location.href;
    if(url==local)
    local=window.location.href+"index.html";//将域名补上index.html
    var lefturl=document.getElementById("menu").getElementsByTagName("a");
    for(i=0;i<lefturl.length;i++){
    if(local.toLowerCase()==lefturl[i].href.toLowerCase()){
    lefturl[i].id="cur";//如果当前地址和菜单栏的某个栏目地址相等，则用到样式cur
    }
    }
    </script>
      

  5.   

    请问如果换成图片,页面加载时导航"A"默认显示一张红色图片背景,其它为蓝色图片背景,点B,C,D变为红色图片背景,导航A变为蓝色图片背景如何写呢?谢