问题描述
我有一组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','tab2')" src="Assets/Button_Tabs_Center.png" style="width:80px;height:28px;">
<img class="tablinks" id="tab_button_3" onclick="tabEvent('tab_button_3','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，则可以单击。
解决方法
选项卡img不可单击，因为尽管您已隐藏锁定img，但它仍位于选项卡img的顶部。它不会消失。就像在另一层上保持一层。
您可以做的就是使用hover属性。您可以在悬停时更改图像，而不是一个保留两个图像。
或者您可以使锁定图像可点击。
使用悬停属性将是更好的编码实践。
编辑：另一种方法是将div与onclick事件一起使用，并在悬停时更改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>
这里的关键是添加使锁定层通过"tabthing"“单击”的CSS，在这里让我演示。
我在命名空间中使用了函数，以使其“包含”在我的tabthings中，并在我的(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();对象的开始处缓存了一些东西，但它是非常标准的。
在处理视觉元素时，我还放弃了所有ID和嵌入式样式，并使用类作为更标准的方法。
.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>session