【发布时间】：2021-03-23 01:27:13
【问题描述】：
我一直在关注 w3schools 的标签教程，然后使用另一个教程来制作密码切换按钮。它在初始选项卡（登录选项卡）上完美运行，但在其余选项卡上，密码切换按钮停止工作。我不知道为什么它停止工作。我将它用于 python 应用程序的 ui。在这个阶段，我只是在尝试设计用户界面。请记住，我对 html/css/java 还是很陌生，所以你可能会发现很多新手错误。非常感谢任何帮助！
HTML：
<!DOCTYPE html>
<html>
<head>
<!--- IMPORT STYLESHEET --->
<link rel="stylesheet" href="style.css">
</head>
<!--- START --->
<body>
<div class="window">
<!--- TAB MENU BAR --->
<div>
<div class="tabmenu">
<button class="tablinkers" onclick="openPage(event, 'Login')" id="defaultOpen">Login</button>
<button class="tablinkers" onclick="openPage(event, 'Register')">Register</button>
<button class="tablinkers" onclick="openPage(event, 'Renew')">Renew</button>
<button class="tablinkers" onclick="openPage(event, 'Help')">Help</button>
</div>
</div>
<!--- LOGIN --->
<div id="Login" class="tabpane">
<form>
<input type="text" class="typetext" name="usernameLogin" placeholder="Username"><br>
<div class="input-container">
<input type="password" name="passwordLogin" placeholder="Password">
<i class="material-icons visibility">visibility_off</i>
</div>
<input type="submit" class="buttoncss" name="buttonRegister">
</form>
</div>
<!--- REGISTER --->
<div id="Register" class="tabpane">
<form>
<input type="email" class="typetext" name="emailRegister" placeholder="Email"><br>
<input type="text" class="typetext" name="usernameRegister" placeholder="Username"><br>
<div class="input-container">
<input type="password" placeholder="Password">
<i class="material-icons visibility">visibility_off</i>
</div>
<input type="text" class="typetext" name="licensekeyRegister" placeholder="License Key"><br>
<input type="submit" name="buttonRegister">
</form>
</div>
<!--- RENEW --->
<div id="Renew" class="tabpane">
<form>
<input type="text" class="typetext" name="usernameRenew" placeholder="Username"><br>
<div class="input-container">
<input type="password" name="passwordLogin" placeholder="Password">
<i class="material-icons visibility">visibility_off</i>
</div>
<input type="text" class="typetext" name="licensekeyRenew" placeholder="License Key"><br>
<input type="submit" name="buttonRegister">
</form>
</div>
<!--- HELP --->
<div id="Help" class="tabpane">
help
</div>
</div>
<!--- IMPORT JAVA --->
<script src="java.js"></script>
</body>
</html>
CSS：
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* START CSS FOR TABS */
/* Define window size. Change before release. */
.window {
border: 1px solid black
}
/* Container holding tab buttons */
.tabmenu {
display:flex;
align-items:center;
flex-direction:column;
float: left;
}
/* The tab buttons */
.tabmenu button {
outline: none;
background-color: #4CAF50;
vertical-align: middle;
color: white;
display: inline-block;
text-align: left;
padding: 5px;
height: 32px;
width: 80px;
border: 0px; /* Button border. */
}
.tabmenu button:hover {
background-color: #7289da;
}
.tabmenu button:active {
background-color: firebrick;
}
.tabmenu button:not(:last-child) {
border-bottom: none;
}
.tabpane {
border: 1px solid black;
}
/* START CSS FOR LINE EDIT, PASSWORD, PWD TOGGLE, BUTTON */
/* Line Edit Class (type="text") */
.typetext {
text-align: left;
color: black;
font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}
/* Password Class (type="password") */
.input-container {
display: flex;
align-items: center;
font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}
.input-container input {
text-align: left;
outline: none;
color: #333;
font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}
i {
position: absolute;
color: #aaa;
cursor: default;
margin-left: 180px;
}
JavaScript：
// START JAVA FOR TABS
function openPage(evt, pageName) {
//Declare variables
var i, tabpane, tablinkers;
// Get all elements with class="tabpane" and hide them
tabpane = document.getElementsByClassName("tabpane");
for (i = 0; i < tabpane.length; i++) {
tabpane[i].style.display = "none";
}
// Get all elements with class="tablinkers" and remove the class active
tablinkers = document.getElementsByClassName("tablinkers")
for (i = 0; i < tablinkers.length; i++) {
tablinkers[i].className = tablinkers[i].className.replace(" active", "")
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(pageName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
// START JAVA FOR PWD TOGGLE
const visibilityToggle = document.querySelector('.visibility');
const input = document.querySelector('.input-container input');
var password = true;
visibilityToggle.addEventListener('click', function() {
if (password) {
input.setAttribute('type', 'text');
visibilityToggle.innerHTML = 'visibility';
} else {
input.setAttribute('type', 'password');
visibilityToggle.innerHTML = 'visibility_off';
}
password = !password;
});
【问题讨论】：
-
@Spectric 我以前几乎没用过java。老实说，我不知道有什么区别？
-
Javascript 在浏览器中运行。 Java 已编译。 Javascript 仅限于 Web 开发，而 Java 则扩展到 Web 应用程序、后端开发等。
-
@Spectric 啊，我明白了。谢谢！您知道我为什么会遇到当前问题吗？
-
@Michael.C 嗯...我去看看
标签： javascript html css input