单击提交按钮后如何隐藏和显示页面（HTML）

Mandy 发表于 Dev

曼迪

在我网站上的一个页面上，用户可以选择在豆豆测验和豆豆生成器之间选择他们想要的那个。我不知道如何创建 javascript，当用户选择他们想要的那个时，它会将他们带到隐藏页面，该页面是测验或基于用户选择的生成器。

下面的代码是我在用户选择一个选项后在主页上拥有的内容提前感谢您的帮助

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>BEANIE GENIE</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="grid-container">
    <header class="headerimg">
      <img src="Images/bigger thing.png"  align="left">
    </header>
    <header class="headertxt">
      <h1>BEANIE GENIE</h1>
    </header>

    
    
    <nav class="nav">
      <div class="topnav">
        <a href="index.html">HOME</a>
        <a href="Page 1.html">WISH</a>
        <a href="Page 2.html">BEANIE BUDDY</a>
        <a href="Page 3.html">CONTACT US</a>
      </div>  
    </nav>

    <aside class="aside">
      <h1>THE WISH PAGE IS WHERE YOU WILL GET TO CHOOSE YOUR BEANIE. EITHER YOU CAN CHOOSE THE BEANIE QUIZ OR A RANDOM BEANIE GENERATOR.</h1>
    </aside>

    <main class="main">
      <h2>CHOOSE AN OPTION ON THE DROPDOWN MENU BELOW!  </h2>
      <label for="beanie">Select an option:</label>
      <select onsubmit="BeanieQuiz ()" id="beanie">
        <option value="Blank"></option>
        <option value="BeanieQuiz" id="quiz">Beanie Quiz</option>
        <option value="Generator">Random Beanie Generator</option> <br>
      </select> 
      <input type="submit" value="Submit">
    </main>
  <footer class="footer">
    <h1> Contact Us! </h1>
    <p> Business: Beanie Genie </p>
    <p> Phone Number: 470-309-8251 </p>
    <p> Email: [email protected] </p>
  </footer>
  </div>

普通的

如果你的意思是你想让用户保持在同一个 HTML 页面上，但你只是想切换视图，你可以做 Mint 提到的

document.querySelector('#beanie').addEventListener('change', (e) => {
  document.querySelectorAll('.page').forEach(el => el.style.display = "none") // to reset back to hidden
  const page = document.getElementById(`page-${e.target.value}`)
  page.style.display = 'block'
})

.page {
  display: none;
}

<div class="page" id="page-BeanieQuiz">
  <h1>Beanie Quiz Page</h1>
  <div>content goes here...</div>
</div>
<div class="page" id="page-Generator">
  <h1>Random Beanie Generator Page </h1>
  <div>content goes here...</div>
</div>

<select id="beanie">
  <option value="BeanieQuiz" id="quiz">Beanie Quiz</option>
  <option value="Generator">Random Beanie Generator</option> <br>
</select>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。