gpt4 book ai didi

javascript - 如何通过单击另一个 html 页面上的按钮来编辑页面?

转载 作者:行者123 更新时间:2023-11-28 05:12:38 25 4
gpt4 key购买 nike

例如,我有一个主页,有2个按钮“显示登录弹出窗口”和“显示注册弹出窗口”,它可以在主页上弹出2个窗口。这 2 个弹出窗口是主页中的 div。我将这 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";
}

最佳答案

我将高度设置为 px值,并删除 <object>为简单起见标记。我的猜测是您的对象标记有问题,我没有按照您尝试的方式使用它来导入 html。

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>

关于javascript - 如何通过单击另一个 html 页面上的按钮来编辑页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41230883/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com