pc端京东顶部导航栏变色代码

PC端京东顶部导航栏变色的代码可以使用HTML、CSS和JavaScript来实现。

首先，在HTML中创建顶部导航栏的结构，例如：

<nav id="topNav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">手机</a></li>
    <li><a href="#">电脑</a></li>
    <li><a href="#">家电</a></li>
    <li><a href="#">生活</a></li>
    <li><a href="#">服饰</a></li>
  </ul>
</nav>

接下来，在CSS中设置导航栏的样式，包括背景色、文字颜色等：

#topNav {
  background-color: #fff; /* 默认背景色 */
}

#topNav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

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

#topNav li a {
  text-decoration: none;
  color: #333; /* 默认文字颜色 */
}

#topNav li.active {
  background-color: #e4393c; /* 选中项背景色 */
}

#topNav li.active a {
  color: #fff; /* 选中项文字颜色 */
}

最后，在JavaScript中添加交互逻辑，通过给选中的导航项添加一个"active"类来改变样式：

<script>
  var navItems = document.querySelectorAll("#topNav li a");
  for (var i = 0; i < navItems.length; i++) {
    navItems[i].addEventListener("click", function() {
      var currentItem = document.querySelector("#topNav li.active");
      if (currentItem) {
        currentItem.classList.remove("active");
      }
      this.parentNode.classList.add("active");
    });
  }
</script>

这样，当点击导航项时，会给点击的导航项添加"active"类，从而改变其背景色和文字颜色，达到顶部导航栏变色的效果。