Question

我已经在Stack Overflow上做了大量的研究，我尝试了很多遇到同样问题的用户的建议，但没有运气。

我有这条javascript：

<script type="text/javascript">
function ActivateTab(strTabName){
    switch (strTabName){
        case "EmployeeInfo":
            divEmployeeInfo.className = "panelActive";
            divCoverageTypes.className = "panelHidden";
        break;
        case "CoverageTypes":
            divEmployeeInfo.className = "panelHidden";
            divCoverageTypes.className = "panelActive";

        break;
    }
}

以下是它的名称：

<table width="100%" border="0" cellSpacing="0" cellPadding="2">
<tr>
    <td align="center" id="tdEmployeeInfo" onClick="ActivateTab('EmployeeInfo')" class="tabActive">Employee Information &amp; Demographic Changes </td>
    <td align="center" id="tdCoverageTypes" onClick="ActivateTab('CoverageTypes')" class="tabItem"><p>Change, Add or Delete Coverage</p></td>
    <td align="center" id="tdSpouseOrPartner" onClick="ActivateTab('SpouseOrPartner')" class="tabItem">Change, Add or Delete Spouse or Domestic Partner</td>
    <td align="center" id="tdDependent" onClick="ActivateTab('Dependent')" class="tabItem">Change, Add or Delete Dependent</td>
</tr>

使用相应的html：

<div id="divEmployeeInfo" class="panelActive">
<input type="hidden" id="SectionTab_EmployeeInfo" name="SectionTab_EmployeeInfo" value="Employee Information">

任何人都能借一秒钟的眼睛吗？

Answer 1

您正在尝试将元素ID用作Javascript变量这是一个非标准的IE扩展，在实际的浏览器中不起作用。

相反，调用document.getElementById来获取具有给定ID的DOM元素：

document.getElementById("divEmployeeInfo").className = "panelActive";

Answer 2

要添加到SLaks答案，您可以更新您的js以使其更具可读性：

var divEmployeeInfo = null;
var divCoverageTypes = null;

function Initialize() {
    if (divEmployeeInfo == null) {
        divEmployeeInfo = document.getElementById("divEmployeeInfo");
        divCoverageTypes = document.getElementById("divCoverageTypes");
    }
}

function ActivateTab(tab) {
    Initialize();

    divEmployeeInfo.className = GetClass("EmployeeInfo", tab);
    divCoverageTypes.className = GetClass("CoverageTypes", tab);
}

function GetClass(key, selected) {
    return key == selected ? "panelActive" : "panelHidden";
}

Answer 3

如果您使用jQuery，您可以修改元素类，如：

$('#divEmployeeInfo').addClass('panelActive');
$('#divCoverageTypes').removeClass('panelActive');

您还可以将您的点击处理移出HTML，如下所示：

$('#tdEmployeeInfo').click(function() {
    $('#divEmployeeInfo').addClass('panelActive');
    $('#divCoverageTypes').removeClass('panelActive');
});

在Firefox（javascript控制台）中未定义div ID - 在IE＆amp;铬

3 个答案: