基于JavaScript实现食谱书翻页控件及单位切换功能修复求助

一、翻页控制面板开发需求 #

• 仅掌握JavaScript基础（只会定义函数与变量），已用CSS完成一款“食谱书”页面
• 需要开发带有前后翻页箭头的控制面板，实现页面切换功能（页面效果参考对应截图）
• 可提供现有代码协助开发

二、单位切换函数bug修复问题 #

我写了切换公制与美制杯量单位的函数，但.content-m元素无法隐藏，.content-us元素能正常隐藏，函数代码如下：

function showUS() {
  document.querySelectorAll('.content-m').forEach(el => el.style.display = 'none');
  document.querySelectorAll('.content-us').forEach(el => el.style.display = 'block');
}

function showMetric() {
  document.querySelectorAll('.content-us').forEach(el => el.style.display = 'none');
  document.querySelectorAll('.content-m').forEach(el => el.style.display = 'block');
}

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