显示/隐藏Div作为覆盖

Question

我正在尝试创建可通过单击按钮打开和关闭的图像叠加层。基本上，我有一个主图像，然后我想单击按钮A并在主图像上显示叠加层A，然后单击按钮B并让叠加层A消失并显示叠加层B。

当前，我正在尝试通过创建一个具有背景图像的隐藏div来实现此目的。当前代码适用于列出的第一个按钮，但不适用于其他任何按钮。

<div class="hide schoolContent" id="schools"

</div>

<div class ="hide recreationContent" id="recreation">

</div>


<div class="hide restaurantsContent"id="restaurants">

</div>


<div class="hide banksContent" id="banks">

</div>


<div class="hide groceriesContent"id="groceries">

</div>


<div class="hide transportationContent"id="transportation">

</div>


<div class="hide libraryContent" id="library"></div>

<div>

<button  class="alertName" name="schoolContent">Schools</button>

<button  class="alertName" name="recreationContent">Recreation</button>

<button  class="alertName" name="restaurantsContent">Restaurants</button>

<button  class="alertName" name="banksContent">Banks</button>

<button  class="alertName" name="groceriesContent">Groceries</button>

<button  class="alertName" name="transportationContent">Study Transportation</button>

<button  class="alertName" name="libraryContent">Library</button>
</div>


<script>var alertName = document.getElementsByClassName("alertName");

var myFunction = function() {

var hide = document.getElementsByClassName("hide");

for (var i =< 0; i < hide.length; i++) {

hide[i].style.display = "none";

}

var name = this.getAttribute("name");

var show = document.querySelector('.' + name);

if (show.style.display = "none") {

show.style.display = "block";

}

else {

show.style.display = "none";

}

};

for (var i = 0; i < alertName.length; i++) {

alertName[i].addEventListener('click', myFunction);

}</script>