jquery 基于所选菜单侧的条件窗口加载

我有以下登录页

当页面加载时，我希望左侧页面是活动的，如图所示，不幸的是，现在当页面加载时，左侧菜单和右侧菜单都是活动的。如果我单击右侧菜单，它不工作。

托管站点https://leskoy.bonusgigs.com/

window.onload = function() {
  document.getElementById('scarves').className = '';
  document.getElementsByClassName('rightlinks')[0].className = 'active'
};

function openLeftMenu(menu) {
  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 = '';

  }

}
window.onload = function() {
  document.getElementById('why').className = '';
  document.getElementsByClassName('tablinks')[0].className = 'active'
};


function openMenu(menu) {
  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 = '';

  }



}

<div class="leftpane">
  <nav style="margin-top: 30px;" id="menu">
    <a class="tablinks " onclick="openMenu('why')" id="whyBtn">
      <h2 class="cooler">why<span class="arrow"></span></h2>
    </a>
    <a class="tablinks" onclick="openMenu('process')" id="processBtn">
      <h2 class="cooler">process<span class="arrow"></span></h2>
    </a>

  </nav>
</div>
<div class="middlepane">
  <div class="content" id="why"></div>
  <div class="content" id="process"></div>
  <div class="content" id="scarves"></div>
  <div class="content" id="stockists"></div>
</div>

<div class="rightpane">
  <div style="margin-top: 60%;">
    <nov 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>
    </nov>
  </div>
</div>

下面介绍了如何在onload中执行多项操作，还要注意如何缓存元素并使用querySelector处理类的第一个元素

window.addEventListener("DOMContentLoaded", function() {
  const scarves = document.getElementById('scarves');
  const scarvesBtn = document.getElementById('scarvesBtn');
  const stockists = document.getElementById('stockists');
  const stockistsBtn = document.getElementById('stockistsBtn');
  const why = document.getElementById('why');
  const rightlinks = document.querySelector('.rightlinks');
  const tablinks = document.querySelector('.tablinks')

  const openLeftMenu = menu => {
    scarves.classList.toggle("content", menu === 'stockists')
    scarvesBtn.classList.toggle("active", menu === 'scarves')
    stockists.classList.toggle("content", menu === 'scarves')
      .classList.toggle("active", menu === 'stockists')
  }
  // init
  scarves.classList.remove("active");
  why.classList.remove("active");
  rightlinks.classList.add("active");
  tablinks.classList.add("active");
});

jquery 基于所选菜单侧的条件窗口加载

1条答案

相关问题

热门标签

最新问答