如何通过单击另一个HTML页面上的按钮来编辑页面

例如，我有一个带有2个按钮的主页"显示登录弹出"one_answers"显示寄存器弹出窗口"，它可以在主页上的弹出2个窗口。这两个弹出窗口是主页中的Divs。我将这3个HTML分开，因为我想要登录和寄存器可以在任何页面上显示为弹出框。

这是我的问题：我在登录弹出页面中也有相同的"显示寄存器弹出"按钮。我想这样做，当我单击按钮时，它可以隐藏登录弹出窗口（主页中的DIV），并在主页上隐藏"显示寄存器弹出窗口"。我该怎么办？

这是我的代码示例：

主页

 <!DOCTYPE>
<html>
<head>
<title>Home page</title>
<meta charset="UTF-8">
<script src="testjs.js"></script>
</head>
<body>
    <button id="login" onclick="goto_login()">goto login</button>
    <button id="register" onclick="goto_register()">goto register</button>
    <div id="loginPopup" style ="background-color:red; display:none;">
        <object id="login_location" type="text/html" data="login.html"
            style="width:100%; height:50%;">
        </object>
    </div>
    <div id="registerPopup" style="background-color: yellow; display:none;">
         <object id="login_location" type="text/html" data="regi.html"
            style="width:100%; height:50%;">
        </object>
    </div>
</body>
</html>

登录弹出

<html>
<head><script src="testjs.js"></script></head>
<body>
    <input id="id" type="text">
    <input id="pw" type="text">
    <input id="login" type="button" value="login">
    <input id="goto_register" onclick="goto_register()" type="button" value="goto-register">
</body>
</html>

注册弹出

<html>
<head><script src="testjs.js"></script></head>
<body>
    <input id="id" type="text">
    <input id="pw" type="text">

    <input id="register" onclick="goto_register()" type="button" value="register">
</body>
</html>

javascript

function goto_login() {
var loginPopup  =  document.getElementById("loginPopup");
var registerPopup = document.getElementById("registerPopup");
loginPopup.style.display="block";
registerPopup.style.display="none";
}
function goto_register() {
var loginPopup  = document.getElementById("loginPopup");
var registerPopup = document.getElementById("registerPopup");
loginPopup.style.display="none";
registerPopup.style.display="block";
}
function close_pop() {
var loginPopup  = document.getElementById("loginPopup");
var registerPopup = document.getElementById("registerPopup");
loginPopup.style.display="none";
registerPopup.style.display="none";
}

i将高度设置为 px值，并删除了<object>标签，以简单起见。我的猜测是您的对象标签有问题，我没有用它来导入您尝试的方式。

function goto_login() {
  var loginPopup = document.getElementById("loginPopup");
  var registerPopup = document.getElementById("registerPopup");
  loginPopup.style.display = "block";
  registerPopup.style.display = "none";
}
function goto_register() {
  var loginPopup = document.getElementById("loginPopup");
  var registerPopup = document.getElementById("registerPopup");
  loginPopup.style.display = "none";
  registerPopup.style.display = "block";
}
function close_pop() {
  var loginPopup = document.getElementById("loginPopup");
  var registerPopup = document.getElementById("registerPopup");
  loginPopup.style.display = "none";
  registerPopup.style.display = "none";
}

<button id="login" onclick="goto_login()">goto login</button>
<button id="register" onclick="goto_register()">goto register</button>
<div id="loginPopup" style="background-color:red; display:none;width:100%; height:300px;">
  <input id="id" type="text">
  <input id="pw" type="text">
  <input id="login" type="button" value="login">
  <input id="goto_register" onclick="goto_register()" type="button" value="goto-register">
</div>
<div id="registerPopup" style="background-color: yellow; display:none;width:100%; height:300px;">
  <input id="id" type="text">
  <input id="pw" type="text">
  <input id="register" onclick="goto_register()" type="button" value="register">
</div>

相关内容

最新更新

热门标签：