javascript - 单击页面上的按钮时如何使用 JavaScript 加载和删除内容？-6ren

javascript - 单击页面上的按钮时如何使用 JavaScript 加载和删除内容？

转载作者：行者123 更新时间：2023-11-30 21:08:45

请用普通 JavaScript 解决方案帮助我(我确定有 JQuery 解决方案，但我还没有准备好 - 我目前只使用普通 JavaScript)？

我有一个基本页面，用作我一直从事的项目的测试平台。我有两个按钮，单击它们会在子目录中加载 HTML 页面。目前，当我单击一个按钮时，它会加载它指向的内容。当我点击第二个按钮时，它也会加载它的内容，但在其他内容的下方。

这是我想要实现的:

当我点击一个按钮(任何一个)时，它指向的内容就会加载到页面上。
当我点击第二个按钮时，最初加载的任何内容都必须从 View 中移除并替换为与第二个按钮关联的内容(我考虑插入 CSS 类以使我能够显示和隐藏内容)。<

换句话说，我想要的行为如下:当我点击按钮 1 时，页面 1 加载。然后，当我点击按钮 2 时，页面 1 消失并加载页面 2。

这是我的 <body>我的测试页的 HTML:

<body>
  <nav>
   <a href="pages/page1.html" class="menulink"> Page 1 </a>
  </nav>
  <section>
    <p>This will test if I can load a page below.</p>
    <button class="btns" id="newbtn1" name="btn">Page 1</button>
    <button class="btns" id="newbtn2" name="btn">Page 2</button>
  </section>
  <h2>Content panel</h2>
  <p>Some content should load here.</p>
  <div id="container">

  </div>

 <script src="longscripts.js"></script>

</body>

这是我到目前为止编写的 JavaScript。它非常笨拙，所以提前道歉:

let el1 = document.createElement('div');
let el2 = document.createElement('div');
let container = document.getElementById('container');
let btnLoad = document.getElementById('newbtn1');
let btnLoad2 = document.getElementById('newbtn2');

el1.innerHTML = '<iframe src="pages/page1.html" title="First page" width="800" height="500">';
el2.innerHTML = '<iframe src="pages/page2.html" title="Second page" width="800" height="500">';


btnLoad.addEventListener('click', function( btnFunc ) {
  console.log('Page 1');
  container.appendChild( el1 );
})

btnLoad2.addEventListener('click', function( altBtnFunc ) {
  console.log('Page 2');
  container.appendChild( el2 );
})

这是我需要帮助的:

如何简化我的 JavaScript 代码以简化它？我想我可以使用 for 来做到这一点循环或类似的东西，但我不知道如何编写这段代码。
如何确保当我第二次和后续点击按钮时，所有已加载的内容都将被删除，并加载与第二个(和后续)按钮关联的内容？<

可能有非常优雅和直接的解决方案，但我的大脑就是没有把这些点联系起来。如果有任何提示或帮助，我将不胜感激。

最佳答案

您可以完全摆脱 el1 和 el2 参数，因为它们没有用。

    let container = document.getElementById('container');
    let btnLoad = document.getElementById('newbtn1');
    let btnLoad2 = document.getElementById('newbtn2');

    btnLoad.addEventListener('click', function( btnFunc ) {
      console.log('Page 1');
      container.innerHTML = '<iframe src="pages/page1.html" title="First page" width="800" height="500">';
    })

    btnLoad2.addEventListener('click', function( altBtnFunc ) {
      console.log('Page 2');
       container.innerHTML = '<iframe src="pages/page2.html" title="Second page" width="800" height="500">';
    })

关于javascript - 单击页面上的按钮时如何使用 JavaScript 加载和删除内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46345475/