另一个img onclick（）下的HTML img不起作用答案

【问题标题】：HTML img under another img onclick() not working另一个img onclick（）下的HTML img不起作用
【发布时间】：2020-12-12 07:16:12
【问题描述】：

我有一组 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 代码可以将 imgs 相互移动，其中标签为 z 索引 1，锁为 z 索引 2。

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

【问题讨论】：

标签： javascript html image tabs onclick

【解决方案1】：

标签img不可点击，因为虽然你隐藏了锁img，但它仍然存在于标签img之上。它不会消失。就像在另一层上保持一层一样。

您可以做的是，使用悬停属性。您可以在悬停时更改图像，而不是让 2 个图像一个接一个。

或者您可以保持锁定图像可点击。

使用 hover 属性将是更好的编码习惯。

编辑：另一种方法是使用带有 onclick 事件的 div 并在悬停时更改 div 的背景

<html>
<head>
<title>Change img on hover</title>
</head>
<style>
#imgDiv1{
width : 100px ;
height : 100px ;
display : block;
background: url("Assets/lock.png");
}
#imgDiv1:hover {
width : 100px;
height : 100px ;
display : block;
background: url("Assets/Button_Tabs_Center.png") ;
}
</style>
<body>
<div id="imgDiv1" onclick="tabEvent()"></div>
<!-- Add more divs as required -->
</body>
</html>

【讨论】：

我不知道悬停属性是什么，你有文档链接吗？
你可以试试这样的：geeksforgeeks.org/…
我已经编辑了答案并添加了另一种可能的方式来满足您的需求。这也是一种简单而干净的方法。
请将答案代码放在答案中，而不是放在可能随时消失的外部链接中。
@MarkSchultheiss 你是对的。以前没有想到这一点。我已经添加了代码。

【解决方案2】：

这里的关键是用pointer-events: none;添加使锁定层“点击通过”的CSS，这里让我演示一下。

我在命名空间中有我的函数，使其“包含”在我的"tabthing" 中，并在我的tabthings 对象的开头缓存一些东西，但除此之外它非常标准。

我还放弃了所有的 ID 和内联样式，并在处理视觉元素时使用了更标准的类。

(function(tabthing, undefined) {
  var tabthings = {
    tabClassName: "tab-link",
    tablockClassName: "tab-lock",
    tabcontentClassName: "tab-content",
    activeClassList: "active-show",
    inactiveClassList: "inactive-hide",
    tabLinks: {},
    tabLocks: {},
    tabContents: {},
    linksParent: {},
    locksParent: {},
    contentParent: {}
  };

  function toggleclass(thisnode, isTrue = true) {
    thisnode.classList.toggle(tabthings.activeClassList, isTrue);
    thisnode.classList.toggle(tabthings.inactiveClassList, !isTrue);
  }

  function toggleActive(thisnode) {
    toggleclass(thisnode, true);
  }

  function toggleInActive(thisnode) {
    toggleclass(thisnode, false)
  }

  function toggleRelated(thisnode) {
    let meIndex = [].indexOf.call(tabthings.linksParent.children, thisnode);
    thisnode.classList.toggle("active", true);
    if (thisnode.classList.contains("active")) {
      toggleActive(tabthings.tabContents[meIndex]);
      toggleInActive(tabthings.tabLocks[meIndex]);
    } else {
      inActivateAll(tabthings.tabLocks);
    }
  }

  function inActivateAll(things) {
    var i = things.length;
    while (i--) {
      toggleInActive(things[i]);
    }
  }

  function activateAll(things) {
    for (let i = 0; i < things.length; i++) {
      toggleActive(things[i]);
    }
  }

  function tabClickHandler(event) {
    let meTab = this; //event.target;//same as this
    // already active, do nothing
    if (this.classList.contains('active')) {
      inActivateAll(tabthings.tabContents);
      toggleActive(tabthings.tabContents[0]);
      meTab.classList.toggle("active", false);
      return;
    }
    activateAll(tabthings.tabLocks);
    inActivateAll(tabthings.tabContents);
    for (let i = 0; i < tabthings.tabLinks.length; i++) {
      tabthings.tabLinks[i].classList.toggle("active", false);
    }

    toggleRelated(meTab);
  }

  tabthing.setup = function() {
    tabthings.linksParent = document.getElementById("tab-link-container");
    tabthings.locksParent = document.getElementById("tab-lock-container");
    tabthings.contentParent = document.getElementById("tab-content-container");
    tabthings.tabLinks = document.getElementsByClassName(tabthings.tabClassName);
    tabthings.tabLocks = document.getElementsByClassName(tabthings.tablockClassName);
    tabthings.tabContents = document.getElementsByClassName(tabthings.tabcontentClassName);
    // add event handlers
    for (let i = 0; i < tabthings.tabLinks.length; i++) {
      tabthings.tabLinks[i].addEventListener("click", tabClickHandler);
    }
    // trigger first tab click event
    const clickevent = new Event('click');
    tabthings.tabLinks[0].dispatchEvent(clickevent);
  };


}(window.tabthing = window.tabthing || {}));
// call the setup function
tabthing.setup();

.mass-container {
  border: 1px solid lime;
  display: flex;
}

#tab-link-container,
#tab-lock-container {
  grid-column: 1;
  grid-row: 1;
}

#tab-link-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  border: 1px solid red;
  top: 1px;
  grid-row-start: 1;
  grid-row-end: 12;
}

#tab-lock-container {
  width: 100%;
  margin-left: -100%;
  display: grid;
  border: 1px solid blue;
  top: 1px;
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 12;
  pointer-events: none;
}

#tab-content-container {
  border: solid cyan 1px;
  display: grid;
}

.tab-content {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 12;
}

.tab-link,
.tab-lock {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.tab-lock {
  display: flex;
  justify-content: flex-end;
}

.tab-lock-1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

.tab-lock-2 {
  grid-column-start: 5;
  grid-column-end: 8;
}

.tab-lock-3 {
  grid-column-start: 9;
  grid-column-end: 12;
}

.active-show {
  visibility: visible;
}

.inactive-hide {
  visibility: hidden;
}

.active {
  background-color: #dddddd;
}

<div class="mass-container">
  <div id="tab-link-container">
    <span class="tab-link tab-link-1"><img src="Assets/Button_Tabs_Center.png" alt="first-img" /></span>
    <span class="tab-link tab-link-2"><img src="Assets/Button_Tabs_Center.png" alt="second-img" /></span>
    <span class="tab-link tab-link-3"><img src="Assets/Button_Tabs_Center.png" alt="third-img" /></span>
  </div>
  <div id="tab-lock-container">
    <span class="tab-lock tab-lock-1 "><img src="Assets/lock.png" alt="1lck" /></span>
    <span class="tab-lock tab-lock-2"><img src="Assets/lock.png" alt="2lck" /></span>
    <span class="tab-lock tab-lock-3"><img src="Assets/lock.png" alt="3lck" /></span>
  </div>

</div>
<div id="tab-content-container">
  <div class="tab-content"><h2>h2 is good</h2>First off this is content</div>
  <div class="tab-content"><h2>tab2 cool</h2>Second we have more content</div>
  <div class="tab-content"><h2>tab3 Yay</h2>Now, this is still content</div>
</div>

【讨论】：