如何用JavaScript实现类似百度新闻导航栏的动态效果？

本文共计800个文字，预计阅读时间需要4分钟。

本例展示了如何用JavaScript实现百度新闻导航栏的效果。以下是大致的代码框架，供您参考：

javascript// 假设已经有一个包含新闻选项的HTML结构// // 最新// 推荐// 娱乐// 体育//

// JavaScript代码document.addEventListener('DOMContentLoaded', function() { var navItems=document.querySelectorAll('#news-nav li a'); var currentActive=null;

navItems.forEach(function(item) { item.addEventListener('mouseover', function() { if (currentActive) { currentActive.classList.remove('active'); } this.classList.add('active'); currentActive=this; }); });});

这段代码首先监听文档加载完毕事件，然后获取所有新闻导航的链接元素。接着，为每个链接添加鼠标悬停事件，当鼠标悬停在某个链接上时，移除其他链接的active类，并为当前链接添加active类。这样，就可以实现导航栏的切换效果。

本文实例为大家分享了JS实现百度新闻导航栏效果的具体代码，供大家参考，具体内容如下

最近在学Web前端，用js简单实现了百度新闻导航栏的效果。