页面标签和JS：getElementbyId无法正常工作？

Question

我试图从此处将整页标签导入到我的php代码中。 我只有一个问题：带有getElementbyId的脚本部分似乎无法正常工作。

它基本上应该激活包含id =“ defaultOpen”的按钮，因此浏览器已经打开了一个选项卡。 您可以在上面的示例中看到逻辑。

我仔细检查了所有内容（尤其是回声），看不到我在这里犯了什么错误。

这是脚本：

<script>
function openPage(pageName, elmnt, color) {
// Hide all elements with class="tabcontent" by default */
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}

// Remove the background color of all tablinks/buttons
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
}

// Show the specific tab content
document.getElementById(pageName).style.display = "block";

// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

这是我的代码：

echo'<button class="tablink" onclick="openPage('; echo"'Home', this, 'red')"; echo'">Home</button>';

echo'<button class="tablink" onclick="openPage('; echo"'Kader', this, 'green')"; echo'" id="defaultOpen">Kader</button>';

echo'<button class="tablink" onclick="openPage('; echo"'Statistik', this, 'blue')"; echo'">Statistik</button>';

echo'<button class="tablink" onclick="openPage('; echo"'Vertrage', this, 'orange')"; echo'">Vertrage</button>';

echo'<button class="tablink" onclick="openPage('; echo"'Archiv', this, 'orange')"; echo'">Archiv</button>';

// Menü
echo'<div id="Home" class="tabcontent">';
  include 'all_home.php';
 echo'</div>';
echo'<div id="Kader" class="tabcontent">';
  include 'all_kader.php';
 echo'</div>';
echo'<div id="Statistik" class="tabcontent">';
  include 'all_statistik.php';
 echo'</div>';
echo'<div id="Vertrage" class="tabcontent">';
  include 'all_verträge.php';
 echo'</div>';
echo'<div id="Archiv" class="tabcontent">';
  include 'all_archiv.php';
 echo'</div>';

CSS是：

/* Style tab links */
.tablink {
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 20%;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
    color: white;
    display: none;
    padding: 55px 5px;
    height: 100%;
}

#Home {
    background-image: url("bg.png");
    background-color: white;
    }
#Kader {
    background-image: url("bg.png");
    background-color: white;
    }
#Statistik {
    background-image: url("bg.png");
    background-color: white;
    }
#Verträge {
    background-image: url("bg.png");
    background-color: white;
    }
#Archiv {
    background-image: url("bg.png");
    background-color: white;
    }

Answer 1

由于单击您的任何按钮仅会调用openPage函数，为什么不在首次加载时仅调用openPage函数，而不是尝试模拟按钮单击以执行相同操作？ 换句话说，更改此：

document.getElementById("defaultOpen").click();

对此：

openPage('Kader', document.getElementById("defaultOpen"), 'green');