Блог

Я провел здесь много исследований по 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;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">
  

Кто-нибудь может одолжить пару секунд просмотра?

Вы пытаетесь использовать идентификатор элемента в качестве переменной Javascript.
Это нестандартное расширение IE, которое не работает в реальных браузерах.

Вместо этого вызовите document.getElementById , чтобы получить элемент DOM с заданным идентификатором:

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

Чтобы добавить ответ в 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";
}
  

Если вы используете jQuery, вы можете изменять классы элементов, такие как:

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

Вы также могли бы перенести обработку кликов из HTML следующим образом:

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