js控制A标签样式问题，请教！

Question

我想通过onclick来改变A的样式，就是点击哪个A标签样式就为active样式，可就是不起作用，请大家帮忙看一下。谢谢
-----------------HTML----------------------
这个是写在MasterPage里面的
<div id="divMenu" class="menu">
        <ul>
          <li><a id="aindex" href="index.aspx"  class="active" onclick="changeStyle(this);" ><span>主页</span></a></li>
          <li><a id="about" href="about.aspx"   onclick="changeStyle(this);" ><span>关于我们</span></a></li>
  <li><a id="apro" href="Products.aspx"  onclick="changeStyle(this);"><span>产品展示</span></a></li>
          <li><a id="aser" href="services.aspx"  onclick="changeStyle(this);"><span>服务项目</span></a></li>
          <li><a id="abbs" href="http://7caipp.5d6d.com/bbs.php"  target="_blank" onclick="changeStyle(this);"><span>论坛</span></a></li>
          <li><a id="ajoin" href="join.aspx" onclick="changeStyle(this);" ><span>加盟</span></a></li>
          <li><a id="acon" href="contact.aspx" onclick="changeStyle(this);"><span>联系我们</span></a></li>
        </ul>
        <div class="clr"></div>
      </div>------------------样式---------------------
.menu { float:right; padding:108px 0 0 0; margin:0; height:35px;}
.menu ul { text-align:right; padding:0; margin:0; list-style:none; border:0; height:35px;}
.menu ul li { float:left; margin:0; padding:0 5px; border:0; height:35px;}
.menu ul li a { float:left; margin:0; padding:10px 0; color:#80310c; font: 14px 幼圆, Tahoma, Arial; text-decoration:none;}
.menu ul li a span { padding:10px 13px; background:none;}
.menu ul li a:hover { background:url(images/r_menu.gif) right no-repeat;color:#e60012;}
.menu ul li a:hover span { background:url(images/l_menu.gif) left no-repeat;}
.menu ul li a.active { background:url(images/r_menu.gif) right no-repeat; color:#e60012;}
.menu ul li a.active span { background:url(images/l_menu.gif) left no-repeat;}-------------------------------JS------------------------------------------------------------
<script  type="text/javascript" language="javascript">
  function changeStyle(whichlink)
  {
    var box = document.getElementById('divMenu');
    var links = document.getElementsByTagName('A');
    for(var i=0;i<links.length;i++)
    {
      links[i].setAttribute("class","span ");
      whichlink.setAttribute("class","active");
    }
  
    
  }
</script>
还有什么其他思路没有，指教。

Answer 1

function changeStyle(whichlink) {
    document.getElementById(whichlink.id).className = "active";
}是这个样子吗

Answer 2

就是点击以后变红色吗？其他还原。
IE9 FF chrome safari都有效果啊~

Answer 3

这个我试过了，可是放到Master模板页里布管用

Answer 4

window.onload = function() {    
    var t = new RegExp(/\w+?\.(aspx|php)/);
    var a = location.href;
    var a = a.match(t)[0];
    alert(a);
    var lis = document.getElementsByTagName("li");
    for(var i = 0; i < lis.length; i++) {
        lis[i].className="";   
        if(lis[i].getElementsByTagName("a")[0].href.match(t)[0] == a) {
          lis[i].className="current";
        }
    }
}
用这个试试~~

Answer 5

window.onload = function() {  
  var t = new RegExp(/\w+?\.(aspx|php)/);
  var a = location.href;
  var a = a.match(t)[0];
  alert(a);
  var lis = document.getElementsByTagName("li");
  for(var i = 0; i < lis.length; i++) {
  lis[i].className="span";  
  if(lis[i].getElementsByTagName("a")[0].href.match(t)[0] == a) {
  lis[i].className="active";
  }
  }
}

Answer 6

听不懂你意思。正常来说，只要你设置了A的active样式，那你点击A就自然会显示active的样式了。
可能看了你的代码会理解，但借用少林足球里的话说“咱是一分钟要回几万帖子的人”，所以楼主们能不能把问题尽量说清楚。