点击添加样式，然后取消其他样式（在线等阿），着急......

Question

要实现功能：点击A，然后给A标签相对应的li加样式，点击B，同理也给相对应的li加样式，但是这个时候其他li的样式要清空，下面是我写的js代码，for循环了就有点混乱了，求高手改下，在线等。          <div class="bg_line" id="div_menu">
            <ul class="letter" id="gameSpellLabel">
              <li class="hotgame currert"><a onclick="ShowTagDetail()" tag="A">A</a> </li>
              <li class=""><a onclick="ShowTagDetail()" tag="B">B</a> </li>
              <li class=""><a onclick="ShowTagDetail()" tag="C">C</a> </li>
              <li class=""><a onclick="ShowTagDetail()" tag="D">D</a> </li>
              <li class=""><a onclick="ShowTagDetail()" tag="E">E</a> </li>
              <li class=""><a onclick="ShowTagDetail()" tag="F">F</a> </li>
              <li class=""><a onclick="ShowTagDetail()" tag="G">G</a> </li>
            </ul>
          </div>
<script type="text/javascript">
    function ShowTagDetail() {
        var div_menu = document.getElementById("div_menu");
        alert(div_menu);
        var lis = div_menu.getElementsByTagName("li");
        for (var i = 0; i < lis.length; i++) {
                 lis[i].onclick = function () {
                   lis[i].className = "hotgame currert";
             }
      }
    }
</script>

Answer 1

<script type="text/javascript">
  function ShowTagDetail() {
  var div_menu = document.getElementById("div_menu");
  alert(div_menu);
  var lis = div_menu.getElementsByTagName("li");
  for (var i = 0; i < lis.length; i++) {
   lis[i].onclick = function () {
for (var j = 0; j < lis.length; j ++) lis[j].className = '';
   lis[i].className = "hotgame currert";
    }
  }
  }
</script>

Answer 2

function ShowTagDetail(obj) {
          var div_menu = document.getElementById("div_menu");
          var lis = div_menu.getElementsByTagName("li");
          for (var i = 0; i < lis.length; i++) lis[i].className = "";//全部清空
          obj.parentNode.className="hotgame";
        }<div class="bg_line" id="div_menu">
  <ul class="letter" id="gameSpellLabel">
  <li class="hotgame"><a onclick="ShowTagDetail(this)" tag="A">A</a> </li>
  <li class=""><a onclick="ShowTagDetail(this)" tag="B">B</a> </li>
  <li class=""><a onclick="ShowTagDetail(this)" tag="C">C</a> </li>
  <li class=""><a onclick="ShowTagDetail(this)" tag="D">D</a> </li>
  <li class=""><a onclick="ShowTagDetail(this)" tag="E">E</a> </li>
  <li class=""><a onclick="ShowTagDetail(this)" tag="F">F</a> </li>
  <li class=""><a onclick="ShowTagDetail(this)" tag="G">G</a> </li>
  </ul>
  </div>行不行 。

Answer 3

<script type="text/javascript">
  $(document).ready(function(){
     $("#div_menu a").click(function(){
         $("li").removeClass();
         $(this).parent().addClass("hotgame currert");
     });
  });
</script>

Answer 4

obj.parentNode.className="hotgame currert";
最后一句 。

Answer 5

<script type="text/javascript">
  function ShowTagDetail() {
  var div_menu = document.getElementById("div_menu");
  alert(div_menu);
  var lis = div_menu.getElementsByTagName("li");
  for (var i = 0; i < lis.length; i++) {
          lis[i].onclick = function (i) {
            for (var j = 0; j < lis.length; j ++) lis[j].className = '';
              lis[i].className = "hotgame currert";
        }
      }
  }
</script>

Answer 6

那我就不知道了 。
我是写个颜色为红的class hotgame 测试 。
我的是有效果的 。

Answer 7

function ShowTagDetail(obj) {
          var lis = document.getElementsByName("aa");          for (var i = 0; i < lis.length; i++) lis[i].className = "";//全部清空
          obj.parentNode.className="hotgame";
        }<div class="bg_line" id="div_menu">
  <ul class="letter" id="gameSpellLabel">
  <li class="hotgame" name="aa"><a onclick="ShowTagDetail(this)" tag="A">A</a> </li>
  <li class="" name="aa"><><a onclick="ShowTagDetail(this)" tag="B">B</a> </li>
  <li class="" name="aa"><><a onclick="ShowTagDetail(this)" tag="C">C</a> </li>
  <li class="" name="aa"><><a onclick="ShowTagDetail(this)" tag="D">D</a> </li>
  <li class="" name="aa"><><a onclick="ShowTagDetail(this)" tag="E">E</a> </li>
  <li class="" name="aa"><><a onclick="ShowTagDetail(this)" tag="F">F</a> </li>
  <li class="" name="aa"><><a onclick="ShowTagDetail(this)" tag="G">G</a> </li>
  </ul>
  </div>试下

Answer 8

<!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>
</head><body>
  <div class="bg_line" id="div_menu">
  <ul class="letter" id="gameSpellLabel">
  <li class="hotgame currert"><a tag="A">A</a> </li>
  <li class=""><a tag="B">B</a> </li>
  <li class=""><a tag="C">C</a> </li>
  <li class=""><a tag="D">D</a> </li>
  <li class=""><a tag="E">E</a> </li>
  <li class=""><a tag="F">F</a> </li>
  <li class=""><a tag="G">G</a> </li>
  </ul>
  </div>
<script type="text/javascript">
window.onload = function() {
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i ++) {
lis[i].onclick = function() {
for (var j = 0; j < lis.length; j ++) lis[j].className = '';
this.className = 'hotgame currert';
}
}
}
</script>
</body>
</html>