我有一些按钮可以更改IFrame中的信息。我点击按钮更改类样式的位置，当它们被点击以显示它们的活动时，但是想知道如何使按钮显示为活动开始...
< script language = "JavaScript"
type = "text/javascript" >
var nl;
var al;
function CngClass(obj) {
if (nl) nl.className = '';
obj.className = 'selected';
nl = obj;
}
function CngClass2(obj) {
if (al) al.className = '';
obj.className = 'selected';
al = obj;
} < /script><style> 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;
}
</style><table border "0" cellpadding="0" cellspacing="0" style="width:500px; background-color:#cccccc">
<tr>
<td class="txt12 bold" colspan="4" align="center">National League</td>
<td class="txt12 bold" colspan="4" align="center">American League</td>
</tr>
<tr>
<td class="txt11 btn"><a onclick="CngClass(this);" href="nwest.html" target="national">West</a>
</td>
<td class="txt11 btn"><a onclick="CngClass(this);" href="ncentral.html" target="national">Central</a>
</td>
<td class="txt11 btn"><a onclick="CngClass(this);" href="neast.html" target="national">East</a>
</td>
<td class="txt11 btn"><a onclick="CngClass(this);" href="nwild.html" target="national">Wild</a>
</td>
<td class="txt11 btn"><a onclick="CngClass2(this);" href="awest.html" target="american">West</a>
</td>
<td class="txt11 btn"><a onclick="CngClass2(this);" href="acentral.html" target="american">Central</a>
</td>
<td class="txt11 btn"><a onclick="CngClass2(this);" href="aeast.html" target="american">East</a>
</td>
<td class="txt11 btn"><a onclick="CngClass2(this);" 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;">
z-best record x-playoff team w-wild card team
</td>
</tr>
</table>
答案 0 :(得分：0)
试试这个看看是不是o.k，稍微改了一下。不知道为什么你需要2个功能所以我把它改成了一个。考虑将其中一些内联样式添加到css中。可能有更好的方法，但这应该做到这一点。 ### EDITED，忘了添加起始课......
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;">
z-best record x-playoff team w-wild card team
</td>
</tr>
</table>
答案 1 :(得分：0)
噢，天哪，这真是一场噩梦，对于回到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;
}