用js怎么实现360导航首页“换肤”功能

360导航首页的“换肤”功能可以通过JavaScript来实现。以下是一个简单的实现方式：

HTML代码：

<div id="skin">
  <ul>
    <li><a href="#" data-skin="skin1">皮肤1</a></li>
    <li><a href="#" data-skin="skin2">皮肤2</a></li>
    <li><a href="#" data-skin="skin3">皮肤3</a></li>
  </ul>
</div>

CSS代码：

/* 皮肤1的样式 */
#skin1 {
  background-color: #f5f5f5;
}
/* 皮肤2的样式 */
#skin2 {
  background-color: #333;
  color: #fff;
}
/* 皮肤3的样式 */
#skin3 {
  background-color: #ff0000;
  color: #fff;
}

JavaScript代码：

var skin = document.getElementById("skin");
var links = skin.getElementsByTagName("a");
for(var i = 0; i < links.length; i++) {
  links[i].addEventListener("click", function(e) {
    e.preventDefault();
    var skinName = this.getAttribute("data-skin");
    document.body.className = skinName;
  });
}

上述代码中，我们首先获取了一个id为“skin”的元素以及其中的所有链接元素。然后，我们为所有链接元素添加了一个点击事件监听器。当用户点击一个链接时，我们首先使用preventDefault()方法来阻止默认链接行为，然后获取该链接的data-skin属性值，即皮肤名称。最后，我们将body元素的className属性设置为皮肤名称，从而改变页面的样式。

在CSS中，我们为每种皮肤定义了不同的样式。当用户点击链接时，JavaScript会根据皮肤名称将body元素的className属性设置为相应的皮肤名称，从而切换页面的样式。