如何在页面加载后用JavaScript仅显示最后5个.nav-link锚标签？

针对你需要隐藏页面中前95个nav-link类的锚标签、只保留最后5个的需求，这里提供几种比现有循环代码更简便的实现方式：

方法1：纯CSS实现（最简便，无需JS） #

如果所有nav-link元素属于同一个父容器的同级元素，直接用CSS选择器就能完成，性能也更好：

/* 隐藏除最后5个之外的所有.nav-link元素 */
.nav-link:not(:nth-last-child(-n+5)) {
  display: none;
}

原理：:nth-last-child(-n+5)会选中父元素下的最后5个子元素，not()选择器排除这些元素，剩下的就会被设置为隐藏。

方法2：简化版JavaScript实现 #

如果需要用JS（比如元素结构不适合纯CSS的场景），可以用更简洁的写法替代原有的循环：

写法A：用querySelectorAll+forEach #

document.querySelectorAll('.nav-link').forEach((link, idx, allLinks) => {
  // 索引小于总数量减5的元素都隐藏
  if (idx < allLinks.length - 5) link.style.display = 'none';
});

写法B：批量选中前N个元素隐藏 #

const allLinks = document.querySelectorAll('.nav-link');
const needHideCount = allLinks.length - 5;
// 只处理需要隐藏的元素，避免遍历全部
Array.from(allLinks).slice(0, needHideCount).forEach(link => {
  link.style.display = 'none';
});

优势：querySelectorAll返回静态集合，避免动态集合可能带来的遍历问题；写法更简洁，可读性更强。

你可以把上述CSS或JS代码替换到Chrome的Scripty扩展中，就能实现刷新页面自动隐藏多余侧边栏链接的效果。

内容的提问来源于stack exchange，提问作者mohitesachin217