文章/答案/技术大牛

发布

社区首页 >问答首页 >使用HTML页面上的“后退”按钮根据用户单击显示/隐藏div

问使用HTML页面上的“后退”按钮根据用户单击显示/隐藏div
EN

Stack Overflow用户

提问于 2019-08-20 05:44:57

回答 2查看 213关注 0票数 0

下面我有三个部门的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>

javascript

jquery

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-08-20 06:39:34

下面是一个小示例，它显示了一种跟踪用户单击的最后一个div的方法，然后显示它。它移除用户单击的div，然后单击“显示最后单击的div”按钮，它将显示下面最后单击的div的内容和黄色背景。

下面是一个指向JSFiddle的链接，这样您就可以看到它的作用：显示最后一组。这不使用jQuery，但如果需要，您可以转换它。

<!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>

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，并为“单击”事件添加一个事件侦听器：

// 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‘param)是一个按钮时，我们才想隐藏单击的div。要从按钮中获取单击的div，我们使用parentElement属性，因为该按钮是div的子级，类为‘..btn包装’：

if (e.target.getAttribute('type') === 'button') {
  previousDivClicked = e.target.parentElement
}

上面，我们使用全局previousDivClicked变量来存储对按钮(e.target)所属的div的引用，以便在必要时显示这个div。

然后从div容器中删除整个div：

divContainer.removeChild(previousDivClicked);

它负责隐藏按钮单击所来自的div，并存储对其的引用以供以后使用。现在，当我们要显示隐藏的最后一个div时，可以添加另一个事件处理程序，这一次是在显示容器的“单击”事件上，该事件包含带有文本“显示最后单击的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‘lastClickedContainer’类来显示.hidden，并删除以前容器中的任何内容：

lastClickedContainer.innerHTML = '';
lastClickedContainer.classList.remove('hidden');

最后，我们将一些CSS样式添加到previousClickedDiv中，然后将其附加到showContainer中，使其显示在页面上：

previousDivClicked.classList.add('last-clicked');
lastClickedContainer.appendChild(previousDivClicked);

票数 1

Stack Overflow用户

发布于 2019-08-20 06:02:33

如果您想要使用jQuery的step表单，那么您可以使用下面的link.It来帮助您根据您的需要制定步骤，并且您不需要这种自定义逻辑，因为well.Link给了您below.Thank。

jQuery步骤

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57567309

复制

相似问题

问使用HTML页面上的“后退”按钮根据用户单击显示/隐藏div
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML页面上的“后退”按钮根据用户单击显示/隐藏divEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML页面上的“后退”按钮根据用户单击显示/隐藏div
EN