Question

我试图在我的php代码中实现整页标签from here。我只有一个问题：似乎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');

页面选项卡和JS：getElementbyId不起作用？

1 个答案: