用原生JS实现爱奇艺首页导航栏代码实例

下面是以原生JavaScript实现爱奇艺导航栏的完整攻略：

1. 准备工作

在HTML文件中，需要首先准备一个导航栏的容器元素，例如使用<ul>标签作为容器，并在容器中添加导航项<li>标签。如下所示：

<ul id="nav-bar">
  <li><a href="#">首页</a></li>
  <li><a href="#">电视剧</a></li>
  <li><a href="#">电影</a></li>
  <li><a href="#">综艺</a></li>
  <li><a href="#">VIP会员</a></li>
</ul>

2. 实现导航栏样式

为了让导航栏更美观，需要添加一些样式。我们可以使用CSS样式表来实现，如下所示：

#nav-bar {
  list-style: none;
  display: flex;
  justify-content: space-around;
  background-color: #FFF;
  height: 50px;
  line-height: 50px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

#nav-bar li {
  flex: 1;
  text-align: center;
}

#nav-bar a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}

3. 实现导航栏交互效果

为了让用户能够交互式使用导航栏，需要添加事件监听函数以及一些交互式效果。

3.1 点击切换样式

我们可以使用addEventListener()方法添加点击事件监听函数，在事件处理程序中添加对应的样式类名来切换样式。下面的代码实现了点击导航项后，为该项添加.active样式类，并移除其他导航项的该类。

const navBar = document.getElementById("nav-bar");
const navItems = navBar.querySelectorAll("li");

function changeStyle(event) {
  for (let i = 0; i < navItems.length; i++) {
    navItems[i].classList.remove("active");
  }
  event.target.parentNode.classList.add("active");
}

for (let i = 0; i < navItems.length; i++) {
  navItems[i].addEventListener("click", changeStyle);
}

3.2 悬浮显示菜单

我们还可以为导航项添加鼠标悬停事件监听函数，在事件处理程序中添加其他元素来实现悬浮显示菜单。下面的代码实现了鼠标悬停在导航项上时，为该项添加.show样式类，并将该项的下一个兄弟元素（即菜单）显示出来。

for (let i = 0; i < navItems.length; i++) {
  navItems[i].addEventListener("mouseover", showMenu);
  navItems[i].addEventListener("mouseout", hideMenu);
}

function showMenu(event) {
  const menuItem = event.target.nextElementSibling;
  event.target.classList.add("show");
  menuItem.style.display = "block";
}

function hideMenu(event) {
  const menuItem = event.target.nextElementSibling;
  event.target.classList.remove("show");
  menuItem.style.display = "none";
}

示例说明：

示例1

如果想要添加一个子菜单，只需要在HTML中的对应导航项<li>中添加一个包含菜单内容的容器元素。例如，添加一个电影子菜单，在HTML文件中添加如下内容：

<ul id="nav-bar">
  <li><a href="#">首页</a></li>
  <li><a href="#">电视剧</a></li>
  <li><a href="#">电影</a> <!-- 添加容器元素 -->
    <div class="sub-menu">
      <a href="#">热门电影</a>
      <a href="#">电影排行榜</a>
      <a href="#">最新上映</a>
      <a href="#">好莱坞大片</a>
    </div>
  </li>
  <li><a href="#">综艺</a></li>
  <li><a href="#">VIP会员</a></li>
</ul>

然后，将CSS样式表中的.sub-menu类名添加到样式表中，并将菜单的样式设置为绝对定位，如下所示：

#nav-bar .sub-menu {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  background-color: #FFF;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

#nav-bar .sub-menu a {
  display: block;
  color: #666;
  text-decoration: none;
  font-size: 14px;
}

最后，重新运行JavaScript文件即可。此时，鼠标悬浮在电影导航项上时，会显示出电影子菜单。

示例2

如果想要为导航项添加动态数据，可以使用JavaScript来获取动态数据并添加到导航栏中。例如，在HTML文件中添加如下导航项：

<ul id="nav-bar">
  <li><a href="#">首页</a></li>
  <li><a href="#">电视剧</a></li>
  <li><a href="#">电影</a></li>
  <li><a href="#">综艺</a></li>
  <li><a href="#">VIP会员</a></li>
  <li><a href="#">更多</a></li><!-- 添加更多项 -->
</ul>

然后，在JavaScript文件中添加如下代码来获取动态数据和添加更多项导航项：

const navBar = document.getElementById("nav-bar");
const navItems = navBar.querySelectorAll("li");

// 获取动态数据
fetch("http://example.com/api/nav-items.json")
  .then(response => response.json())
  .then(data => {
    for (let item of data) {
      const navItem = document.createElement("li");
      const navLink = document.createElement("a");
      navLink.href = item.href;
      navLink.textContent = item.name;
      navItem.appendChild(navLink);
      navBar.insertBefore(navItem, navBar.lastChild);
    }
 });

上述代码从http://example.com/api/nav-items.json获取动态数据，并将每一个数据项创建成一个新的导航项，插入到更多项之前。最后，重新运行JavaScript文件即可看到添加的新导航项。