Javascript 另一个img onclick（）下的HTML img不工作_Javascript_Html_Image_Tabs_Onclick

Javascript 另一个img onclick（）下的HTML img不工作

javascript html image tabs

Javascript 另一个img onclick（）下的HTML img不工作,javascript,html,image,tabs,onclick,Javascript,Html,Image,Tabs,Onclick,我有一套img，它们作为标签工作，在它们上面有img锁我的目标是将顶部的img锁开关隐藏起来，并使选项卡img可点击 HTML Javascript function tabEvent(id, evt, tabName) { var tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcon

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

我的目标是将顶部的img锁开关隐藏起来，并使选项卡img可点击

HTML

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"

函数tabEvent（id、evt、tabName）{
var tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i


有一些css代码将IMG移动到彼此的顶部，选项卡是z索引1，锁是z索引2
每当我将锁img隐藏时，它就会消失，但它下面的选项卡img不可单击。如果锁img不在代码中，则它是可单击的。
选项卡img不可单击，因为尽管您隐藏了锁img，但它仍然存在于选项卡img的顶部。它不会消失。这就像把一层放在另一层上
您可以做的是，使用hover属性。您可以在悬停状态下更改图像，而不是一个一个地保留两个图像
或者，您可以保持锁定图像可单击
使用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>


悬停时更改img
#imgDiv1{
宽度：100px；
高度：100px；
显示：块；
背景：url（“Assets/lock.png”）；
}
#imgDiv1：悬停{
宽度：100px；
高度：100px；
显示：块；
背景：url（“Assets/Button_Tabs_Center.png”）；
}
选项卡img不可单击，因为尽管您已隐藏了锁img，但它仍然存在于选项卡img的顶部。它不会消失。这就像把一层放在另一层上
您可以做的是，使用hover属性。您可以在悬停状态下更改图像，而不是一个一个地保留两个图像
或者，您可以保持锁定图像可单击
使用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>


悬停时更改img
#imgDiv1{
宽度：100px；
高度：100px；
显示：块；
背景：url（“Assets/lock.png”）；
}
#imgDiv1：悬停{
宽度：100px；
高度：100px；
显示：块；
背景：url（“Assets/Button_Tabs_Center.png”）；
}
这里的关键是添加CSS，使锁层通过指针事件“点击”：无，这里让我演示一下
我在一个名称空间中有我的函数，使它“包含”在我的“tabthing”
中，并在开始时将一些东西缓存在我的tabthings
对象中，但除此之外，它是相当标准的
在处理视觉元素时，我还省去了所有ID和内嵌样式，并将类用作更标准的类

（函数（选项卡，未定义）{
var tabthings={
tabClassName:“选项卡链接”，
tablockClassName:“制表锁”，
tabcontentClassName:“选项卡内容”，
activeClassList：“活动显示”，
inactiveClassList：“非活动隐藏”，
tabLinks:{}，
tabLocks:{}，
tabContents:{}，
linksParent:{}，
locksParent:{}，
contentParent:{}
};
函数toggleclass（thisnode，isTrue=true）{
thisnode.classList.toggle（tabthings.activeClassList，isTrue）；
thisnode.classList.toggle（tabthings.inactiveClassList，！isTrue）；
}
函数toggleActive（此节点）{
toggleclass（thisnode，true）；
}
功能切换不活动（thisnode）{
toggleclass（thisnode，false）
}
功能切换相关（thisnode）{
让meIndex=[].indexOf.call（tabthings.linksParent.children，thisnode）；
thisnode.classList.toggle（“活动”，true）；
if（thisnode.classList.contains（“活动”））{
toggleActive（tabthings.tabContents[meIndex]）；
toggleInActive（tabthings.tabLocks[meIndex]）；
}否则{
灭活所有（tabthings.tabLocks）；
}
}
所有（事物）的功能{
var i=事物长度；
而(我--){
切换不活动（事物[i]）；
}
}
功能激活所有（事物）{
for（设i=0；i