如何使Javascript的“ getElementsByClassName（）”正常工作？

Question

When I do this, everything works just fine:

function openTab(tabName)
{
    document.getElementById("divUsers").className = "invisible";
    document.getElementById("divGroups").className = "invisible";
    document.getElementById("divZFSPools").className = "invisible";
    document.getElementById("divShares").className = "invisible";

    document.getElementById(tabName).className = "visible";
}

But when I do this , nothing happens:

function openTab(tabName)
{
    var targetTab, activeTab;

    // Get the div:
    targetTab = document.getElementById(tabName);

    // If it is the active tab, return:
    if(targetTab.style.display.className == "visible");
        return;

    // No, it is not the active tab:
    document.getElementsByClassName("visible")[0].className = "invisible";

  // Make the target tab visible:
  document.getElementById(tabName).className = "visible";

}

FYI: "visible" and "invisible" are two CSS class names.

Does anyone have idea why? How can I achieve the desktop tab control behaviour using HTML and Javascript?

Answer 1

If I don't misunderstood you question just remove the ; after your if condition because a simple typo ( ; ) can make huge difference to your code.

Assume,

if (0 === 1); { alert("Hello World") }

// equivalent to:

if (0 === 1) /*do nothing*/ ;
alert ("Hello World");

This code will alert "Hello World", but not because 0 equals 1, but because of the semicolon. It makes JavaScript think that you have an empty statement there, and everything to the right of it is treated as no longer belonging to the if conditional and thus independent of it.

Source : https://www.codecademy.com/en/forum_questions/507f6dd09266b70200000d7e

So on your code it will be like this,

//If it is the active tab, return:
if(targetTab.style.display.className == "visible"); 
    return;                                    //^^ remove this semicolon