我有一组img，它们作为标签工作，在它们上面有img锁。

我的目标是使锁女巫是在顶部的img被隐藏和标签img成为可点击。

HTML

<div id="Tabs">
  <img class="tablinks" id="tab_button_1" onclick="tabEvent('tab_button_1', event, 'tab1')" src="Assets/Button_Tabs_Center.png" style="width:80px;height:28px;">
  <img class="tablinks" id="tab_button_2" onclick="tabEvent('tab_button_2', event, 'tab2')" src="Assets/Button_Tabs_Center.png" style="width:80px;height:28px;">
  <img class="tablinks" id="tab_button_3" onclick="tabEvent('tab_button_3', event, 'tab3')" src="Assets/Button_Tabs_Center.png" style="width:80px;height:28px;">
</div>

<div id="Tabs_locks">
  <img id="tab_lock_1" src="Assets/lock.png" style="position:relative;width:18px;height:28px;left:30px">
  <img id="tab_lock_2" src="Assets/lock.png" style="position:relative;width:18px;height:28px;left:30px">
  <img id="tab_lock_3" src="Assets/lock.png" style="position:relative;width:18px;height:28px;left:30px">
</div>

JavaScript

function tabEvent(id, evt, tabName) {
    var tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

document.getElementById("tab_lock_1").style.visibility = "hidden"
document.getElementById("tab_lock_2").style.visibility = "hidden"
document.getElementById("tab_lock_3").style.visibility = "hidden"

有一些css代码将IMG相互移动，其中制表符为z索引1，锁为z索引2。

每当我使锁img隐藏时，它就会消失，但是它下面的标签img是不可点击的，如果锁img不在代码中，它是可点击的。