Javascript 奥丁项目餐厅：如何切换标签？_Javascript_Html_Git_Npm_Webpack

Javascript 奥丁项目餐厅：如何切换标签？

javascript html git npm webpack

Javascript 奥丁项目餐厅：如何切换标签？,javascript,html,git,npm,webpack,Javascript,Html,Git,Npm,Webpack,如何在选项卡之间切换？在index.js文件中，我尝试将事件侦听器添加到home.js文件中的按钮中，但是当您单击home&menu按钮时，clearAll（）函数只会使页面完全空白。js文件生成的文本显示为“menu”（另一个问题是它显示在初始页面上-只希望在单击菜单时显示）。单击菜单时，我想删除我在home.js文件中添加的纸杯蛋糕图像（同时仍保留文本和字幕），只显示“菜单”文本。单击主页时，我希望所有内容都与初始页面相同（在home.js中生成标题、副标题和图像） index.html &

如何在选项卡之间切换？在index.js文件中，我尝试将事件侦听器添加到home.js文件中的按钮中，但是当您单击home&menu按钮时，clearAll（）函数只会使页面完全空白。js文件生成的文本显示为“menu”（另一个问题是它显示在初始页面上-只希望在单击菜单时显示）。单击菜单时，我想删除我在home.js文件中添加的纸杯蛋糕图像（同时仍保留文本和字幕），只显示“菜单”文本。单击主页时，我希望所有内容都与初始页面相同（在home.js中生成标题、副标题和图像）

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   
    
    <link rel="stylesheet" href="styles.css" />
    <title>Restaurant Page</title>
  </head>
  <body>
   
    <div id="content"></div>
    <script src="main.js"></script>
  </body>
</html>


const home = (() => {
    
    
    const content=document.querySelector("#content");
   const header=document.createElement("header");

   header.innerHTML=`
   <div id="tab-buttons">
   <div class="button">Home</div>
   <div class="button">Menu</div>
   <div class="button">Contact</div>
    </div>
    `

    content.appendChild(header);

    const homeDiv=document.createElement("home-div");

    homeDiv.innerHTML=`
    <h1>Tasty Treats</h1>
    <h2 id="subtitle"><i>Cupcakes for the whole family!</i></h2>
   
    <img src="images/cupcake.jpeg" id="homeImg">
   
  
    `;
    



    content.appendChild(homeDiv);
})();

const menu = (() => {

    const content= document.querySelector("#content");
    const menuDiv = document.createElement("menu-div");
   
  
    menuDiv.innerHTML = `
   
    <h1>Menu</h1>
   
  
  `;
  
    content.appendChild(menuDiv);

    
  })();

import {home}  from './home';
import {menu} from './menu';

const homeButton = document.getElementsByClassName('button')[0];
const menuButton = document.getElementsByClassName('button')[1];

const content=document.querySelector("#content");

function clearAll(){
    while (content.firstChild) {
        content.removeChild(content.lastChild);
      }
}



window.addEventListener('load', home);
homeButton.addEventListener('click', function(){
    clearAll();
    home();
});

menuButton.addEventListener('click', function(){
    clearAll();
    menu();
});