下面我在 HTML 中分为三个部分。我使用 jquery 根据用户点击按钮来隐藏和显示这些 div。我还有一个后退按钮。如何跟踪用户点击，以便可以显示之前查看过的部门用户
<div id="signupform" style="display: block;">
<form id="signupForm" style="position: relative;">
<div id="floatContainer1" class="float-container mt-4">
<label for="floatField1">E-mail Id</label>
<input type="email" id="floatField1" data-placeholder="abc@xyz.com" required>
</div>
<button type="button" class="btn-block btn-orange mt-4 p-3">Verify</button>
</form>
</div>
<div id="otpform" style="display: none;" class="my-5">
<div id="wrong_otp" class="position-absolute text-danger text-left" style="top: -30px;display: none;">
Please enter the correct OTP
</div>
<form id="verify_otp" style="position: relative;">
<div id="floatContainer2" class="float-container mt-4">
<label for="floatField2">Verify OTP</label>
<input type="text" id="floatField2" data-placeholder="Please Enter the 6-Digit OTP" required>
</div>
<button type="button" class="btn-block btn-orange mt-4 p-3">Verify</button>
</form>
</div>
最佳答案
这是一个小示例，展示了一种跟踪用户单击的最后一个 div 然后显示它的方法。它会删除用户单击的 div，然后如果单击“显示上次单击的 Div”按钮，它将在下面以黄色背景显示上次单击的 div 的内容。
这里是 JSFiddle 的链接，以便您可以看到它的实际效果:Show Last Div Fiddle 。这不使用 jQuery，但您可以根据需要对其进行转换。
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.btn-wrapper {
padding: 20px;
border: 1px solid black;
margin: 10px;
width: 300px;
}
#div-container, #show-container {
width: 800px;
}
.hidden {
display: none;
}
.last-clicked {
background: #FFFCAA;
}
</style>
</head>
<body>
<div id="div-container">
<div class="btn-wrapper">
<p>I'm some text in the first div</p>
<button type="button" name="btn-1">Click Me 1</button>
</div>
<div class="btn-wrapper">
<p>I'm some text in the second div</p>
<button type="button" name="btn-2">Click Me 2</button>
</div>
<div class="btn-wrapper">
<p>I'm some text in the third div</p>
<button type="button" name="btn-3">Click Me 3</button>
</div>
</div>
<div id="show-container">
<div class="btn-wrapper">
<button type="button" name="show">Show Last Clicked Div</button>
</div>
</div>
<div id="last-clicked-container" class="hidden">
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
JS
var previousDivClicked;
var divContainer = document.getElementById('div-container');
var showContainer = document.getElementById('show-container');
var lastClickedContainer = document.getElementById('last-clicked-container');
divContainer.addEventListener('click', function(e) {
if (!lastClickedContainer.classList.contains('hidden')) {
lastClickedContainer.classList.add('hidden');
}
if (e.target.getAttribute('type') === 'button') {
previousDivClicked = e.target.parentElement
console.log(previousDivClicked);
}
divContainer.removeChild(previousDivClicked);
});
showContainer.addEventListener('click', function() {
lastClickedContainer.innerHTML = '';
lastClickedContainer.classList.remove('hidden');
previousDivClicked.classList.add('last-clicked');
lastClickedContainer.appendChild(previousDivClicked);
});
以下是对正在发生的事情的简要说明:
代码说明
在 HTML 中，我们有 3 个 div，其中包含按钮，单击这些按钮将隐藏 div:
<div class="btn-wrapper">
<p>I'm some text in the first div</p>
<button type="button" name="btn-1">Click Me 1</button>
</div>
<!-- and so on... -->
我们还有一个 div，其中包含将显示最后单击的 div 的按钮:
<div id="show-container">
<div class="btn-wrapper">
<button type="button" name="show">Show Last Clicked Div</button>
</div>
</div>
还有一个隐藏的 div，我们可以在其中显示最后单击的 div:
<div id="last-clicked-container" class="hidden">
</div>
在 JS 文件中，我们获取包含所有按钮的 div 容器，单击这些按钮时，会隐藏其关联的 div，并向其中添加“click”事件的事件监听器:
// selected at the beginning of the file, shown here for reference
var divContainer = document.getElementById('div-container');
divContainer.addEventListener('click', function(e) { // rest of function after
仅当事件目标(“e”参数)是按钮时，我们才希望隐藏被单击的 div。要获取从按钮单击的 div，我们使用parentElement 属性，因为按钮是具有“.btn-wrapper”类的 div 的子级:
if (e.target.getAttribute('type') === 'button') {
previousDivClicked = e.target.parentElement
}
上面，我们使用全局 previousDivClicked 变量来存储对按钮(e.target)所属 div 的引用，以便我们可以在必要时显示该 div。
然后我们从 div 容器中删除整个 div:
divContainer.removeChild(previousDivClicked);
这负责隐藏按钮单击来自的 div 并存储对其的引用以供以后使用。现在，当我们想要显示最后一个隐藏的 div 时，我们通过添加另一个事件处理程序来实现，这次是在显示容器的“click”事件上，其中包含带有文本“Show Last Clicked Div”的按钮:
// done at top of script but shown for reference
var showContainer = document.getElementById('show-container');
showContainer.addEventListener('click', function() { // rest of the function follows
在此函数中，我们希望通过删除 CSS '.hidden' 类来显示 lastClickedContainer，并删除之前容器中的所有内容:
lastClickedContainer.innerHTML = '';
lastClickedContainer.classList.remove('hidden');
最后，我们向 previousClickedDiv 添加一些 CSS 样式，然后将其附加到 showContainer，以便它显示在页面上:
previousDivClicked.classList.add('last-clicked');
lastClickedContainer.appendChild(previousDivClicked);
关于javascript - 使用 HTML 页面上的后退按钮根据用户点击显示/隐藏 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57567309/