Question

请帮助我使用一个普通的JavaScript解决方案（我确定有JQuery解决方案，但我还没准备好 - 我目前只使用vanilla JavaScript）？

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

这就是我想要实现的目标：

当我点击某个按钮（任何一个）时，它指向的内容会在页面上加载。
当我点击第二个按钮时，最初加载的任何内容必须从视图中删除，并替换为与第二个按钮关联的内容（我考虑插入CSS类以使我能够显示和隐藏内容）。

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

以下是我的测试页面的<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循环或类似的东西来做这件事，但我无法解决如何编写此代码。
如何确保当我第二次及以后点击某个按钮时，将删除已加载的所有内容，并将与第二个（及后续）按钮关联的内容加载到其位置？

可能有非常优雅和直接的解决方案，但我的大脑只是没有连接点。我很感激任何提示或帮助。

Answer 1

您可以完全摆脱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">';
    })

Answer 2

您可以在使用innerHTML添加第二页之前删除第1页。如果已加载第2页并按下按钮，则只会删除第2页并将其重新放入。

btnLoad2.addEventListener('click', function( altBtnFunc ) {
  container.innerHTML = ""; // replace container contents with nothing
  console.log('Page 2');
  container.appendChild( el2 );
})

当我点击页面上的按钮时，如何使用JavaScript加载和删除内容？

2 个答案: