Fatal编程技术网
  • javascript/
  • Javascript 用另一个（div）替换一个元素（div）

Javascript 用另一个（div）替换一个元素（div）

javascript html function

Javascript 用另一个（div）替换一个元素（div）,javascript,html,function,Javascript,Html,Function,我一直在尝试创建一个功能，允许在不离开同一页面的情况下在网站上移动，只需在单击时加载不同的内容 <!DOCTYPE html> <html> <head> <title>Freud Got Lynched</title> <link rel="stylesheet" type="text/css" href="site.css"> <link href="https://fonts.google

我一直在尝试创建一个功能，允许在不离开同一页面的情况下在网站上移动，只需在单击时加载不同的内容

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


弗洛伊德被处以私刑

Um documentário interactivo inspirado nas obras do realization dor David Lynch。。。
我们的分包科学是一家私营公司


sonhar


  • 

    • 

    • 

    • 

    • 

    • 

    • 

    

  • 

  • 

  •
我在Javascript上有这个函数

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";
  }


功能显示页（id）{
如果（id=“第1页”）{
var pages=document.queryselectoral（“div”）；
对于（变量i=0；i
问题是，在单击触发函数后，并非所有div#segunda中的内容都被加载。所有div#abertura元素都被删除了，就像它应该做的那样，但是从div#segunda中显示的唯一元素是img.fundo

有什么想法吗？请记住我是JavaScript的初学者。

这里的问题是
div
s在
segunda
div中。更好的方法是为顶级div分配一个类，然后使用该类隐藏它们。例如，这里有一个代码的简化版本


...
...
和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";
  }


功能显示页（id）{
如果（id=“第1页”）{
var pages=document.document.getElementsByClassName（“容器”）；
对于（变量i=0；i
这里的问题是，在
segunda
div中有
div
s。更好的方法是将一个类分配给顶级div，然后使用该类隐藏它们。例如，这里有一个代码的简化版本


...
...
和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";
  }


功能显示页（id）{
如果（id=“第1页”）{
var pages=document.document.getElementsByClassName（“容器”）；
对于（变量i=0；i
您的html缺少一些结束标记，因此无效。我也修复了这个问题。 现在，变化如下：

  • 为“页面”提供一种通用的方法来识别它们是一个好主意，这样您就可以只为它们查询DOM。在这种情况下，我为它们提供了类
    page
    。您的问题是，通过执行
    var pages=document.querySelectorAll（“div”）操作
    您基本上选择了页面上的所有
    div
    s，然后将它们隐藏起来，这会产生不想要的效果
  • 接下来，以某种方式唯一地标识页面容器也是一个好主意。这可以通过给它们一个
    id
    来实现。最好为这些id设置一个格式，以便您可以轻松地使用它们。在这种情况下，我给了它们id
    page\u x
    ，其中
    x
    是一个数字
  • 转到
    showPage
    功能，我们现在可以只传递所需的页码，例如
    showPage（1）
    。因为我们有了特定的ID格式，现在使用它们更加优雅。正如您在函数中看到的，我使用了
    .page
    类，然后比较了循环中的ID以确定要显示的内容和要隐藏的内容
  • 另一个选项是在css中的
    页面上有
    display:none；
    类，还有另一个名为
    active
    的类和
    display:block；
    的类，然后只需将该类添加到希望显示的
    div中，并将其从其他类中删除即可
以下是更新的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>


弗洛伊德被处以私刑

Um documentário interactivo inspirado nas obras do realization dor David Lynch。。。
我们的分包科学是一家私营公司。



sonhar


    

  • 

      

    • 

    • 

    • 

    • 

    • 

    • 

    

  • 

  • 

  •
和js功能：

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";
      }
    }
}

功能显示页（id）{
让pages=document.querySelectorAll（“