基于菜单项单击的纯Javascript显示div？

Question

我只需要对我当前的代码提出一些建议。我试图根据单击的菜单项显示不同的div。我在理论上使用某种索引方法思考。我认为我一次使用的if语句不起作用，但在编码方面似乎有点可怕。

无论如何你怎么想？

    /**
     * Lets get Menu container
     */
    var menu = document.getElementById("configurator-menu");

    /**
     * Set Current Tab and Store which tab is Active
     */
     var navitem = menu.querySelector(".configurator-menuitems div");
     navitem.className += " " + "activeTab";

     /**
      * Add click events to Menu Tabs
      */
      var tabs = menu.querySelectorAll(".configurator-menuitems div");
      for (var i = 0; i < tabs.length; i++) {
        tabs[i].onclick=displayPage;
      }

      /**
       * Tabs Logic
       */
       function displayPage() {
         var items = menu.querySelectorAll(".configurator-menuitems div");
         for (var i = 0; i < items.length; i++) {
           items[i].classList.remove("activeTab");
         }
         this.className += " " + "activeTab";
         if (this.classList.contains("mainMenu1")) {
            var item = document.getElementByClassName("appCanvas1");
            item.style.display = "block";
         }
         else if (this.classList.contains("mainMenu2")) {
           var item = document.getElementByClassName("appCanvas2");
           item.style.display = "block";
         }
         else if (this.classList.contains("mainMenu3")) {
           var item = document.getElementByClassName("appCanvas3");
           item.style.display = "block";
         }
       }

<div id="configurator-menu" class="appMenu" style="background-color:#001A35;">
    <div class="appLogo">
      Logo Here
    </div>
    <hr class="no-margin" />
    <div class="configurator-menuitems">
      <div class="mainMenu-btn mainMenu1">Shape</div><hr class="no-margin" />
      <div class="mainMenu-btn mainMenu2">Size</div><hr class="no-margin" />
      <div class="mainMenu-btn mainMenu3">Color</div><hr class="no-margin" />
    </div>
    <div class="menuspacer"></div><hr class="no-margin" />
    <div class="currentSettings">
      <p class="settings-title">Your Selection</p>
      <p class="variant-config">Shape: </p>
      <p class="variant-config">Colors: </p>
      <p class="variant-config">Size: </p>
      <p class="variant-config">Quantity: </p>
      <p class="variant-config">Total Price: </p>
    </div>
  </div>
  <div class="canvas-wrapper">
    <div class="appCanvas1" style="background-color:#e7e7e7;">
      <div class="shape-selection-bar">
        <div class="shape-selector"><img src="'.plugins_url("pentant_conical.png", __FILE__).'" alt="" /></div>
        <div class="shape-selector"><img src="'.plugins_url("pendant_cyl.png", __FILE__).'" alt="" /></div>
        <div class="shape-selector"><img src="'.plugins_url("standing_lamp_conical.png", __FILE__).'" alt="" /></div>
        <div class="shape-selector"><img src="'.plugins_url("standing_lamp_cyl.png", __FILE__).'" alt="" /></div>
      </div>
      <div class="configurator-progressBtn"> Move On</div>
    </div>
    <div class="appCanvas2" style="background-color:#e7e7e7;">
      <div class="configurator-progressBtn"> Move On</div>
    </div>
    <div class="appCanvas3" style="background-color:#e7e7e7;">
      <div class="configurator-progressBtn"> Move On</div>
    </div>
  </div>