用另一个 (div) 替换一个元素 (div)

Question

I've been trying to create a function that allow to move around a website without leaving the same page, just loading different contents on click.我一直在尝试创建一个 function 允许在不离开同一页面的情况下在网站上移动，只需在点击时加载不同的内容。

<!DOCTYPE html>
<html>
<head>
    <title>Freud Got Lynched</title>
    <link rel="stylesheet" type="text/css" href="site.css">
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;523;600;700;800&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <script type="text/javascript" src="site.js"></script>
    <meta charset="UTF-8">
</head>
<body>
  <div id="abertura" class="page0">
    <video autoplay muted loop>
        <source src="assets/fundo1.webm" type="video/webm">
      </video>
      <div class="info">
          <img src="assets/logo.png" alt="logo" class="logobig">
          <p class="texto">Um documentário interativo inspirado nas obras do realizador David Lynch... 
            ou uma viagem pelo subconsciente incomum de pessoas comuns enquanto dormem.</p>
          <p class="sonhar">Sonhar</p>
          <a href="javascript:showPage('page1')"><img src="assets/botao2.png" alt="botao" class="botao"></a>
          </div>
  </div>
        <div id="segunda" class="page1">
          <img src="assets/fundo.png" class="fundo">
                <div class="container">
                        <div id="myNav" class="overlay">
                            <a href="javascript:void(0);" class="closebtn" onclick="closeNav();">&times;</a>
                            <div class="overlay-content">
                              <ul><li><a href="#">Episódios</a></li>
                                <ul><li><a href="#">Episódio 1</a></li>
                                    <li><a href="#">Episódio 2</a></li>
                                    <li><a href="#">Episódio 3</a></li>
                                    <li><a href="#">Episódio 4</a></li>
                                    <li><a href="#">Episódio 5</a></li>
                                    <li><a href="#">Episódio 6</a></li>
                                </ul>
                                <li><a href="sobre.html">Sobre</a></li>
                                <li><a href="sobre.html#autores">Autores</a></li>
                                <li><a href="sobre.html#creditos">Créditos</a></li>
                            </div>
                          </div>
                          <div class="botaomenu" onclick="myFunction(this); openNav();">
                            <div class="bar1"></div>
                            <div class="bar2"></div>
                            <div class="bar3"></div>
                </div>
                <img src="assets/logo.png" alt="logo" class="logomedium" onclick="showPage('page0')"></div>
        </div>

I have this function on Javascript我在 Javascript 上有这个 function

function showPage(id) {

  if (id=="page1") {
    var pages = document.querySelectorAll("div");
    for (var i = 0; i < pages.length; i++) {
      pages[i].style.display = "none";
    }

    var le = document.getElementById('segunda');
    le.style.display = "block";
  }

The problem is that not all of the contents in the div#segunda are being loaded after the click triggers the function.问题是在单击触发 function 后，并非 div#segunda 中的所有内容都被加载。 All the elements of the div#abertura are removed, as it's supposed to do, but the only element that shows from the div#segunda is the img.fundo. div#abertura 的所有元素都被删除，正如它应该做的那样，但是从 div#segunda 显示的唯一元素是 img.fundo。

Any ideas?有任何想法吗？ Please keep in mind that i'm a beginner in JavaScript.请记住，我是 JavaScript 的初学者。

Answer 1

The problem here is that you have div s inside segunda div.这里的问题是您在segunda div 中有div 。 A better way to approach this would be to assign a class to the top-level divs, and then hide them using that class.解决此问题的更好方法是将 class 分配给顶级 div，然后使用该 class 隐藏它们。 For example here's an abridged version of the code.例如，这里是代码的精简版。

<body>
<div id="1" class="container">...</div>
<div id="2" class="container">...</div>
</body>

Along with JS like和 JS 一样

function showPage(id) {

  if (id=="page1") {
    var pages = document.document.getElementsByClassName("container");
    for (var i = 0; i < pages.length; i++) {
      pages[i].style.display = "none";
    }

    var le = document.getElementById('segunda');
    le.style.display = "block";
  }

Answer 2

Your html is missing some closing tags, so it is invalid.您的 html 缺少一些结束标签，因此无效。 I have also fixed that.我也解决了这个问题。 Now, the changes:现在，变化：

It is a good idea to give your "pages" a common way to identify them so that you can query the DOM only for them.为您的“页面”提供一种识别它们的通用方法是一个好主意，这样您就可以只为它们查询 DOM。 In this case, I have given them the class page .在这种情况下，我给了他们 class page 。 Your problem was that by doing var pages = document.querySelectorAll("div");你的问题是通过做var pages = document.querySelectorAll("div"); you were basically selecting all the div s on the page and then hide them, which has an undesired effect.您基本上选择了页面上的所有div然后隐藏它们，这会产生不良影响。
Next, it is also a good idea to uniquely identify the page containers somehow.接下来，以某种方式唯一标识页面容器也是一个好主意。 This can be achieved by giving them an id .这可以通过给他们一个id来实现。 It is a good idea to have a format for these ids so you can easily work with them.为这些 id 设置一个格式是个好主意，这样您就可以轻松地使用它们。 In this case, I have given them the id page_x , where x is a number.在这种情况下，我给了他们 id page_x ，其中x是一个数字。
Going to the showPage function, we are now able to pass just the number of the page we want, eg showPage(1) .转到showPage function，我们现在可以只传递我们想要的页面编号，例如showPage(1) 。 Because we have a certain format for the ids, it is now more elegant to work with them.因为我们有特定的 id 格式，所以现在使用它们更加优雅。 As you can see in the function, I used the .page class and then I compared the ids in the loop to determine what is to be shown and what to hide.正如您在 function 中看到的那样，我使用了.page class，然后我比较了循环中的 id 以确定要显示的内容和隐藏的内容。
Another option would be to have display: none;另一种选择是display: none; on the .page class in css and have another class called active with display: block;在.page 8CBA22E28EB17B5F5C6AE2A266AZ 中的 .page class 上，并有另一个 class 名为active with display: block; and then just add this class to the div you wish to show and remove it from the others然后只需将此 class 添加到您要显示的div并将其从其他 div 中删除

Here's the updated html:这是更新的 html：

<!DOCTYPE html>
<html>
   <head>
      <title>Freud Got Lynched</title>
      <link rel="stylesheet" type="text/css" href="site.css">
      <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;523;600;700;800&display=swap" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
      <script type="text/javascript" src="site.js"></script>
      <meta charset="UTF-8">
   </head>
   <body>
      <div id="page_0" class="page">
         <video autoplay muted loop>
            <source src="assets/fundo1.webm" type="video/webm">
         </video>
         <div class="info">
            <img src="assets/logo.png" alt="logo" class="logobig">
            <p class="texto">Um documentário interativo inspirado nas obras do realizador David Lynch... 
               ou uma viagem pelo subconsciente incomum de pessoas comuns enquanto dormem.
            </p>
            <p class="sonhar">Sonhar</p>
            <a href="javascript:showPage(1)"><img src="assets/botao2.png" alt="botao" class="botao"></a>
         </div>
      </div>
      <div id="page_1" class="page" style='display: none;'>
         <img src="assets/fundo.png" class="fundo">
         <div class="container">
            <div id="myNav" class="overlay">
               <a href="javascript:void(0);" class="closebtn" onclick="closeNav();">&times;</a>
               <div class="overlay-content">
                  <ul>
                    <li><a href="#">Episódios</a></li>
                      <ul>
                         <li><a href="#">Episódio 1</a></li>
                         <li><a href="#">Episódio 2</a></li>
                         <li><a href="#">Episódio 3</a></li>
                         <li><a href="#">Episódio 4</a></li>
                         <li><a href="#">Episódio 5</a></li>
                         <li><a href="#">Episódio 6</a></li>
                      </ul>
                    <li><a href="sobre.html">Sobre</a></li>
                    <li><a href="sobre.html#autores">Autores</a></li>
                    <li><a href="sobre.html#creditos">Créditos</a></li>
                  </ul>
               </div>
            </div>
            <div class="botaomenu" onclick="myFunction(this); openNav();">
               <div class="bar1"></div>
               <div class="bar2"></div>
               <div class="bar3"></div>
            </div>
            <img src="assets/logo.png" alt="logo" class="logomedium" onclick="showPage(0)">
         </div>
      </div>
  </body>
</html>

And js function:和js function：

function showPage(id) {
    let pages = document.querySelectorAll(".page");

    for (var i = 0; i < pages.length; i++) {
        if(pages[i].id !== `page_${id}`) {
        pages[i].style.display = "none";
      } else {
        pages[i].style.display = "block";
      }
    }
}

用另一个 (div) 替换一个元素 (div)

问题描述

2 个解决方案

解决方案1
0 2020-05-12 15:24:06

解决方案2
0 2020-05-12 15:58:04

用另一个 (div) 替换一个元素 (div)

问题描述

2 个解决方案

解决方案1 0 2020-05-12 15:24:06

解决方案2 0 2020-05-12 15:58:04

解决方案1
0 2020-05-12 15:24:06

解决方案2
0 2020-05-12 15:58:04