页面加载时菜单激活异常：实现左侧默认激活及修复右侧菜单失效

1. HTML标签拼写错误：右侧导航使用了不存在的<nov>标签，而非标准<nav>，导致点击事件无法正常触发
2. 重复绑定window.onload：两次定义window.onload，后一次覆盖前一次，导致右侧菜单初始化逻辑失效，初始样式控制混乱
3. 菜单切换无互斥处理：左右菜单切换时，未隐藏另一组的内容及激活状态，易引发界面元素重叠或状态异常

1. 修正HTML标签错误 #

将右侧导航的<nov>改为标准<nav>：

<div class="rightpane">
  <div style="margin-top: 60%;">
    <nav id="menu">
      <a class="rightlinks" onclick="openLeftMenu('scarves')" id="scarvesBtn">
        <h2 class="drool">scarves<span class="arrow"></span></h2>
      </a>
      <a class="rightlinks" onclick="openLeftMenu('stockists')" id="stockistsBtn">
        <h2 class="drool">stockists<span class="arrow"></span></h2>
      </a>
    </nav>
  </div>
</div>

2. 合并window.onload初始化逻辑 #

统一初始化逻辑，确保左侧菜单默认激活、右侧菜单默认未激活：

window.onload = function() {
  // 左侧菜单初始化：激活why，隐藏process
  document.getElementById('why').className = '';
  document.getElementById('process').className = 'content';
  document.getElementById('whyBtn').className = 'active';
  document.getElementById('processBtn').className = '';

  // 右侧菜单初始化：隐藏所有内容，按钮均未激活
  document.getElementById('scarves').className = 'content';
  document.getElementById('stockists').className = 'content';
  document.getElementById('scarvesBtn').className = '';
  document.getElementById('stockistsBtn').className = '';
};

3. 完善菜单切换互斥逻辑 #

修改切换函数，确保左右菜单切换时互斥隐藏另一组内容及激活状态：

function openLeftMenu(menu) {
  // 隐藏左侧所有内容及激活状态
  document.getElementById('why').className = 'content';
  document.getElementById('process').className = 'content';
  document.getElementById('whyBtn').className = '';
  document.getElementById('processBtn').className = '';

  if (menu === 'scarves') {
    document.getElementById('scarves').className = '';
    document.getElementById('stockists').className = 'content';
    document.getElementById('scarvesBtn').className = 'active';
    document.getElementById('stockistsBtn').className = '';
  }
  if (menu === 'stockists') {
    document.getElementById('stockists').className = '';
    document.getElementById('scarves').className = 'content';
    document.getElementById('stockistsBtn').className = 'active';
    document.getElementById('scarvesBtn').className = '';
  }
}

function openMenu(menu) {
  // 隐藏右侧所有内容及激活状态
  document.getElementById('scarves').className = 'content';
  document.getElementById('stockists').className = 'content';
  document.getElementById('scarvesBtn').className = '';
  document.getElementById('stockistsBtn').className = '';

  if (menu === 'why') {
    document.getElementById('why').className = '';
    document.getElementById('process').className = 'content';
    document.getElementById('whyBtn').className = 'active';
    document.getElementById('processBtn').className = '';
  }
  if (menu === 'process') {
    document.getElementById('process').className = '';
    document.getElementById('why').className = 'content';
    document.getElementById('processBtn').className = 'active';
    document.getElementById('whyBtn').className = '';
  }
  if (menu === 'connect') {
    document.getElementById('connect').className = '';
    document.getElementById('process').className = 'content';
    document.getElementById('connectBtn').className = 'active';
    document.getElementById('whyBtn').className = '';
  }
  if (menu === 'faq') {
    document.getElementById('faq').className = '';
    document.getElementById('process').className = 'content';
    document.getElementById('faqBtn').className = 'active';
    document.getElementById('whyBtn').className = '';
  }
}

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