选择按钮时如何更改内容

Question

大家好，我有一个包含三个选择按钮的表单，当页面加载时会预先选择其中的“分发”，其中包含全名、密码和位置等信息。如何使用JS创建点击效果，当任何按钮被选中时，预选，取消选择，内容发生变化。为了更清楚，这里有一些图片可以进一步解释

页面加载时：

当我选择“购买”时会发生什么：

这是我的代码：

* {
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  padding: 0;
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  display: flex;
  font-size: 16px;
  user-select: none;
}


/* APPLICATION */

.applicant {
  width: 60%;
  margin: auto;
  text-align: left;
  margin: 90px auto;
  padding-top: 100px;
  padding-bottom: 100px;
}

.login-center {
  height: 100%;
  flex-basis: 41%;
  background: #ffffff;
  padding: 35px 5px 0px 5px;
  box-sizing: border-box;
  box-shadow: 0 0 50px 0px #e1e1e1;
}

.text h2 {
  text-align: center;
  font-size: 35px;
  font-weight: 600;
  color: #000;
}

.links {
  text-align: center;
  margin-left: -20px;
  margin-right: -20px;
  margin: 0 auto;
  padding-top: 50px;
}

.app-button {
  color: #c4c4c4;
  background-color: #ffffff;
  border: 1px solid #000;
  font-weight: bold;
  font-size: 17px;
  width: 200px;
  margin: 0 20px;
  display: inline-block;
  line-height: 40px;
  padding: 5px;
  cursor: pointer;
}

.app-button:hover {
  background: #c4c4c4;
  color: #000000;
  transition: 0.5s;
}


/* ACTIVE STATE */

.links .active,
.app-button:hover {
  border: 1px solid #c4c4c4;
  background-color: #c4c4c4;
  color: #000;
}


/* FORM */

.form input::placeholder {
  font-size: 14px;
  color: #000;
}

.form label {
  color: #000;
  margin: 20px 0;
  font-size: 17px;
}

.form-u {
  margin: 70px 0;
  padding: 0px 100px;
}

.form input {
  width: 100%;
  padding: 20px;
  margin: 20px 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: #ffffff;
  border: 1.7px solid #e1e1e1;
}

.form input:focus {
  border-color: #c4c4c4;
  box-shadow: 0 0 15px 0px #e1e1e1;
}

.button-u {
  color: #c4c4c4;
  background-color: #000;
  border: 1px solid rg#c4c4c4;
  font-weight: bold;
  font-size: 17px;
  width: 100%;
  margin: 40px 0;
  display: inline-block;
  line-height: 40px;
  padding: 5px;
  cursor: pointer;
}


/* DROPDOWN FOR LOCATION*/

.form input {
  font-size: 15px;
  color: #000;
}

.selector {
  width: 100%;
  padding-top: 20px;
  margin-bottom: 25px;
  position: relative;
}

#selectField p {
  font-size: 15px;
}

#selectField {
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #c4c4c4;
  padding: 20px 20px;
  color: #000;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
}

<!--Form-->
<section class="applicant">
  <div class="login-center">
    <div class="text">
      <h2>CREATE</h2>
    </div>
    <div class="links">
      <button type="button" class="app-button active">Distribute</button>
      <button type="button" class="app-button">Buy</button>
      <button type="button" class="app-button">Sell</button>

    </div>
    <div class="form-u">
      <form action="" class="form">


        <label for="uname"><b>Full Name:</b></label>
        <input type="text" name="name=" Enter full name "required">

        <label for="psw "><b>Password:</b></label>
        <input type="password " name="password " placeholder="Enter password " required>


        <label for="sem "><b>Location:</b></label>
        <div class="selector ">
          <div id="selectField ">
            <p id="selectText ">Select a Location</p>
            <img src="logo/arrow_down.png " alt=" " id="arrowIcon ">
          </div>
        </div>

        <button type="submit " class="button-u ">SUBMIT</button>

      </form>

    </div>

  </div>

</section>

总而言之，我希望能够单击所有按钮，并且单击的每个按钮应该具有从图像中看到的不同内容。希望我足够清楚。谢谢

Answer 1

将每个表单放在单独的 div 元素中，并且默认只显示第一个。然后为每个按钮分配一个 ID，并将 ID 引用到包含表单的 div 元素。然后在单击每个按钮时，显示相应的 div 元素并隐藏所有同级 div 元素

Answer 2

你可以在下面查看sn-p， 请注意，我从您的示例中删除了一些 HTML，但我实现了这个请求“我希望能够单击所有按钮，并且单击的每个按钮应该具有从图像中看到的不同内容”

在sn-p下面我是用javascript来实现的，对form进行了一些更新。请注意，您可以使用 JQuery 或其他方式来实现这一点，这只是其中之一。

这是我的方法

• 我为 Button[for] 和 Form[id] 添加了新属性，以便将它们连接起来，我使用它是因为它更清楚地说明了哪个按钮对应哪个表单。
• 从那里只需要编写几行 javascript 代码。

1. 创建函数来切换表单
2. 使用javascript给按钮添加点击事件，按钮会调用切换表单函数。
3. 使用 javascript，您将能够删除任何同时具有“app-button”和“active”类的 div 上的“active”类，并将该类添加到当前调用者
4. 使用这些按钮的“for”属性，我们可以找到要隐藏和显示的配对表单。

这段代码没有那么优化，也没有那么好，因为它没有任何动画，你可以使用 CSS 过渡来处理它并切换类和计时器，或者如果你想要简单，你可以在那里添加一个 jquery并使用淡入淡出功能。

(function() {
  const switchForm = (element) => {
    const oldActive = document.querySelector(".app-button.active");

    oldActive.classList.remove("active");
    document.querySelector(`#${oldActive.getAttribute("for")}`).style.display = "none";

    element.classList.add("active")
    document.querySelector(`#${element.getAttribute("for")}`).style.display = "";
  }

  document.querySelectorAll(".app-button").forEach(btn => {
    btn.addEventListener("click", () => switchForm(btn));
  });
})()

* {
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  padding: 0;
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  display: flex;
  font-size: 16px;
  user-select: none;
}


/* APPLICATION */

.applicant {
  width: 60%;
  margin: auto;
  text-align: left;
  margin: 90px auto;
  padding-top: 100px;
  padding-bottom: 100px;
}

.login-center {
  height: 100%;
  flex-basis: 41%;
  background: #ffffff;
  padding: 35px 5px 0px 5px;
  box-sizing: border-box;
  box-shadow: 0 0 50px 0px #e1e1e1;
}

.text h2 {
  text-align: center;
  font-size: 35px;
  font-weight: 600;
  color: #000;
}

.links {
  text-align: center;
  margin-left: -20px;
  margin-right: -20px;
  margin: 0 auto;
  padding-top: 50px;
}

.app-button {
  color: #c4c4c4;
  background-color: #ffffff;
  border: 1px solid #000;
  font-weight: bold;
  font-size: 17px;
  width: 200px;
  margin: 0 20px;
  display: inline-block;
  line-height: 40px;
  padding: 5px;
  cursor: pointer;
}

.app-button:hover {
  background: #c4c4c4;
  color: #000000;
  transition: 0.5s;
}


/* ACTIVE STATE */

.links .active,
.app-button:hover {
  border: 1px solid #c4c4c4;
  background-color: #c4c4c4;
  color: #000;
}


/* FORM */

.form input::placeholder {
  font-size: 14px;
  color: #000;
}

.form label {
  color: #000;
  margin: 20px 0;
  font-size: 17px;
}

.form-u {
  margin: 70px 0;
  padding: 0px 100px;
}

.form input {
  width: 100%;
  padding: 20px;
  margin: 20px 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: #ffffff;
  border: 1.7px solid #e1e1e1;
}

.form input:focus {
  border-color: #c4c4c4;
  box-shadow: 0 0 15px 0px #e1e1e1;
}

.button-u {
  color: #c4c4c4;
  background-color: #000;
  border: 1px solid rg#c4c4c4;
  font-weight: bold;
  font-size: 17px;
  width: 100%;
  margin: 40px 0;
  display: inline-block;
  line-height: 40px;
  padding: 5px;
  cursor: pointer;
}


/* DROPDOWN FOR LOCATION*/

.form input {
  font-size: 15px;
  color: #000;
}

.selector {
  width: 100%;
  padding-top: 20px;
  margin-bottom: 25px;
  position: relative;
}

#selectField p {
  font-size: 15px;
}

#selectField {
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #c4c4c4;
  padding: 20px 20px;
  color: #000;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
}

<!--Form-->
<section class="applicant">
  <div class="login-center">
    <div class="text">
      <h2>CREATE</h2>
    </div>
    <div class="links">
      <button type="button" for="distribute" class="app-button active">Distribute</button>
      <button type="button" for="buy" class="app-button">Buy</button>
      <button type="button" for="sell" class="app-button">Sell</button>

    </div>
    <div class="form-u">
      <form action="" class="form" id="distribute">
        <label for="uname"><b>Distribute Inputs:</b></label>
        <input type="text" name="name=" Enter full name "required">
        <button type="submit " class="button-u ">SUBMIT DISTRIBUTE</button>
      </form>
      <form action="" class="form" style="display:none;" id="buy">
        <label for="uname"><b>Buy Inputs:</b></label>
        <input type="text" name="name=" Enter full name "required">
        <button type="submit " class="button-u ">SUBMIT BUY</button>
      </form>
      <form action="" class="form" style="display:none;" id="sell">
        <label for="uname"><b>Sell Inputs:</b></label>
        <input type="text" name="name=" Enter full name "required">
        <button type="submit " class="button-u ">SUBMIT SELL</button>
      </form>
    </div>

  </div>

</section>