按钮启动为活动状态

天哪，那真是一场噩梦，回到 5 岁。在编辑后尝试格式化上述答案的代码太麻烦了，将您的 html 改回原来的样子并将 JS 更改为这个。

  var nl;
var al;
var Alinks = document.getElementsByTagName('a');
function CngClass(obj) {	
			
				for(var i=0;i < Alinks.length;i++){	
					if(Alinks[i].getAttribute('target')=="national"){
						 if(Alinks[i].className="selected"){					
													Alinks[i].className="";
				}
			}
		}
  if (nl) nl.className = '';
  obj.className = 'selected';
  nl = obj;
}
function CngClass2(obj) {
	
	for(var i=0;i < Alinks.length;i++){	
					if(Alinks[i].getAttribute('target')=="american"){
						 if(Alinks[i].className="selected"){					
													Alinks[i].className="";
				}
			}
		}
  if (al) al.className = '';
  obj.className = 'selected';
  al = obj;
}

试试这个看看它是否正常，稍微改变了一下。不明白为什么你需要 2 个函数，所以我把它改成一个。考虑将其中一些内联样式添加到 css 中。可能有更好的方法，但这应该做到。### 编辑，忘记添加起始类...

function CngClass(obj,targ) {
	
	var Alinks = document.getElementsByTagName('a');
	var topboxes=document.getElementsByClassName('txt12');
	for(var j=0;j<topboxes.length;j++){
		topboxes[j].style.backgroundColor="#cccccc";
	}
	for(var i=0;i < Alinks.length;i++){
		console.log(Alinks[i].className);
		if(Alinks[i].className="selected"){Alinks[i].className="";
		}
	}
console.log(obj+' '+targ);
obj.className="selected";
document.getElementById(targ).style.backgroundColor="orange";
}

body {
  margin: 0px;
  position: absolute;
  background: #cccccc;
}
a {
  text-decoration: none;
  color: #000000;
  display: block;
  vertical-align: middle;
  width: 62px;
  height: 20px;
  padding-top: 5px;
}
a:hover {
  text-decoration: none;
  color: #fd5a1e;
  background-color: #000000;
  display: block;
  width: 62px;
  height: 20px;
  padding-top: 5px;
  vertical-align: middle;
}
.txt10 {
  font-size: 10px;
  font-family: arial, helvetica, verdana;
}
.txt11 {
  font-size: 11px;
  font-family: arial, helvetica, verdana;
}
.txt12 {
  font-size: 12px;
  font-family: arial, helvetica, verdana;
}
.txt16 {
  font-size: 16px;
  font-family: arial, helvetica, verdana;
}
.white {
  color: #ffffff;
}
.bold {
  font-weight: bold;
}
.pad3 {
  padding-left: 3px;
}
.border {
  border-bottom: 1px solid #000000;
}
.border1 {
  border-bottom: 1px dashed #fd5a1e;
}
.btn {
  text-decoration: none;
  width: 62px;
  height: 20px;
  background-color: #cccccc;
  color: #000000;
  text-align: center;
  vertical-align: middle;
  display: block;
  padding-top: 5px;
}
.selected {
  background-color: #000000;
  color: #fd5a1e;
  width: 62px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  display: block;
  padding-top: 5px;
  border: 1px solid #fd5a1e;
}

<table border "0" cellpadding="0" cellspacing="0" style="width:500px; background-color:#cccccc">
  <tr>
    <td class="txt12 bold" colspan="4" align="center" id="national">National League</td>
    <td class="txt12 bold" colspan="4" align="center"id="american">American League</td>
  </tr>
  <tr>
    <td class="txt11 btn"><a onclick="CngClass(this,this.target)" class="selected" href="nwest.html" target="national">West</a>
    </td>
    <td class="txt11 btn"><a onclick="CngClass(this,this.target)" href="ncentral.html" target="national">Central</a>
    </td>
    <td class="txt11 btn"><a onclick="CngClass(this,this.target)" href="neast.html" target="national">East</a>
    </td>
    <td class="txt11 btn"><a onclick="CngClass(this,this.target)" href="nwild.html" target="national">Wild</a>
    </td>
    <td class="txt11 btn"><a onclick="CngClass(this,this.target)" class="selected" href="awest.html" target="american">West</a>
    </td>
    <td class="txt11 btn"><a onclick="CngClass(this,this.target)" href="acentral.html" target="american">Central</a>
    </td>
    <td class="txt11 btn"><a onclick="CngClass(this,this.target)" href="aeast.html" target="american">East</a>
    </td>
    <td class="txt11 btn"><a onclick="CngClass(this,this.target)" href="awild.html" target="american">Wild</a>
    </td>
  </tr>
  <tr>
    <td colspan="4">
      <iframe src="nwest.html" name="national" frameborder="0" height="165" width="250">You need a Frames Capable browser to view this content.</iframe>
    </td>
    <td colspan="4">
      <iframe src="awest.html" name="american" frameborder="0" height="165" width="250">You need a Frames Capable browser to view this content.</iframe>
    </td>
  </tr>
  <td colspan="8" class="txt10" style="background-color:#cccccc; width:500px; height:25px;">
    &nbsp;&nbsp;&nbsp;z-best record &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; x-playoff team &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; w-wild card team
  </td>
  </tr>
</table>