在这种情况下如何添加内容？

Question

所以我试图为一家企业建立一个登陆页面，但我无法添加内容，因为 div 从太远的地方开始。

但奇怪的是，它在侧边栏被激活时起作用。我只是一个初学者。

const sidebar = document.getElementById('sidebar');
const hamburgerButton = document.getElementById('hamburger-button');
const hamburgerIcon = document.getElementById('hamburgerIcon');

hamburgerButton.addEventListener('click', () => {
  sidebar.classList.toggle('sidebar-visible');
  if (sidebar.classList[1] === 'sidebar-visible') {
    hamburgerIcon.src = 'icons/close-icon.png';
    hamburgerIcon.classList.toggle('close-icon');
  } else if (!sidebar.classList[1]) {
    hamburgerIcon.src = 'icons/hamburger-icon.svg';
    hamburgerIcon.classList.toggle('close-icon');
  }
  // console.log(sidebar.classList[1]);
})

<div class="div-hamburger">
  <button class="hamburger-button" id="hamburger-button">
      <img id="hamburgerIcon" class="hamburger-icon" src="icons/hamburger-icon.svg">
    </button>
</div>
<div class="header">
  <div class="div-nav-buttons">
    <button class="home-button nav-buttons">Home</button>
    <button class="contact-button nav-buttons">Contact</button>
    <button class="products-button nav-buttons">Products</button>
  </div>
</div>
<div class="sidebar-hidden" id="sidebar">
  <div class="div-menu">
    <button class="sidebar-options">Home</button>
    <button class="sidebar-options">Products</button>
    <button class="sidebar-options">My Orders</button>
    <button class="sidebar-options">My Account</button>
    <button class="sidebar-options">Contact</button>
  </div>
</div>
<div class="div-of-divs">
  <div class="advertisements">
    ad
  </div>
  <div class="content">
    content
  </div>
  <div class="advertisements">
    ad
  </div>
</div>

我试图改变高度，但它不起作用。非常感谢任何帮助！

Answer 1

原帖已编辑！这是原帖的回复：

鉴于您在正确的目录中有图标，您可能想要切换一些内容。

在那种情况下，有两个问题：

缺少括号：
```
);
```
。所以把最后一个
```
}
```
改成
```
});
```
.
```
<script/>
```
应该在
```
<body/>
```
里面的代码下面。

所以工作解决方案：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles/header.css" />
    <link rel="stylesheet" href="styles/sidebar.css" />
    <link rel="stylesheet" href="styles/body.css" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Karthikas Traders - Home</title>
  </head>
  <body>
    <div class="div-hamburger">
      <button id="hamburger-button" type="button">
        <img
          id="hamburgerIcon"
          class="hamburger-icon"
          src="icons/hamburger-icon.svg"
        />
      </button>
    </div>
    <div class="header">
      <div class="div-nav-buttons">
        <button class="home-button nav-buttons">Home</button>
        <button class="contact-button nav-buttons">Contact</button>
        <button class="products-button nav-buttons">Products</button>
      </div>
    </div>
    <div class="sidebar-hidden" id="sidebar">
      <div class="div-menu">
        <button class="sidebar-options">Home</button>
        <button class="sidebar-options">Products</button>
        <button class="sidebar-options">My Orders</button>
        <button class="sidebar-options">My Account</button>
        <button class="sidebar-options">Contact</button>
      </div>
    </div>
    <div class="div-of-divs">
      <div class="advertisements">ad</div>
      <div class="content">content</div>
      <div class="advertisements">ad</div>
    </div>
    <script>
      const sidebar = document.getElementById('sidebar');
      const hamburgerButton = document.getElementById('hamburger-button');
      const hamburgerIcon = document.getElementById('hamburgerIcon');

      hamburgerButton.addEventListener('click', () => {
        sidebar.classList.toggle('sidebar-visible');
        if (sidebar.classList[1] === 'sidebar-visible') {
          hamburgerIcon.src = 'icons/close-icon.png';
          hamburgerIcon.classList.toggle('close-icon');
        } else if (!sidebar.classList[1]) {
          hamburgerIcon.src = 'icons/hamburger-icon.svg';
          hamburgerIcon.classList.toggle('close-icon');
        }
      });
    </script>
  </body>
</html>

祝你有美好的一天！

在这种情况下如何添加内容？

问题描述投票：0回答：1

1个回答

最新问题

在这种情况下如何添加内容？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1