优雅切换！导航栏与页面紧密互动，独家教程助你实现视觉盛宴

前端

2024-01-02 21:26:21

效果展示

让我们先来看看这种效果的实际演示：

[演示效果链接]

在这个演示中，当您点击导航栏中的选项时，对应的页面内容块将平滑切换显示，同时选中项将居中对齐。这种效果在许多现代网站中都很常见，因为它可以提高用户体验，让网站看起来更加美观和易于使用。

实现步骤

要实现这种效果，我们需要使用一些前端开发技术，包括 HTML、CSS 和 JavaScript。具体步骤如下：

首先，我们需要在 HTML 中定义导航栏和内容块。导航栏通常包含一系列选项，每个选项对应一个页面内容块。
接下來，我們需要使用CSS來設置導航欄和內容塊的樣式。導航欄通常使用水平排列，而內容塊則使用垂直排列。同時，我們還需要設置導航欄的選項樣式，使其在被選中時具有不同的外觀。
最後，我們需要使用JavaScript來實現導航欄和內容塊之間的互動。當用戶點擊導航欄中的選項時，JavaScript將觸發一個事件，從而切換到對應的內容塊。同時，JavaScript還需要居中對齊選中項。

代码示例

以下是如何使用 HTML、CSS 和 JavaScript 实现导航栏和内容块互动切换效果的代码示例：

<ul id="nav">
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div id="content">
  <div id="section1">
    <h1>Section 1</h1>
    <p>This is the content for Section 1.</p>
  </div>
  <div id="section2">
    <h1>Section 2</h1>
    <p>This is the content for Section 2.</p>
  </div>
  <div id="section3">
    <h1>Section 3</h1>
    <p>This is the content for Section 3.</p>
  </div>
</div>

#nav {
  list-style-type: none;
  display: flex;
  justify-content: center;
}

#nav li {
  margin-right: 20px;
}

#nav a {
  text-decoration: none;
  color: black;
}

#nav li:hover a {
  color: blue;
}

#nav li.active a {
  color: red;
}

#content {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
}

#section1, #section2, #section3 {
  display: none;
}

#section1.active, #section2.active, #section3.active {
  display: block;
}

const navItems = document.querySelectorAll('#nav li');
const contentSections = document.querySelectorAll('#content div');

navItems.forEach((navItem, index) => {
  navItem.addEventListener('click', () => {
    // Remove the active class from all nav items and content sections
    navItems.forEach((item) => {
      item.classList.remove('active');
    });
    contentSections.forEach((section) => {
      section.classList.remove('active');
    });

    // Add the active class to the current nav item and content section
    navItem.classList.add('active');
    contentSections[index].classList.add('active');

    // Scroll to the active content section
    contentSections[index].scrollIntoView({ behavior: 'smooth' });
  });
});