Question

我希望有人可以回答我的问题，这对你来说可能很容易，但我并不习惯JavaScript。

所以我使用这段代码制作了一个菜单：

function tabSwitch(new_tab, new_content) {  

    document.getElementById('content_1').style.display = 'none';  
    document.getElementById('content_2').style.display = 'none';  
    document.getElementById('content_3').style.display = 'none';          
    document.getElementById(new_content).style.display = 'block';     

    document.getElementById('tab_1').className = '';  
    document.getElementById('tab_2').className = '';  
    document.getElementById('tab_3').className = '';          
    document.getElementById(new_tab).className = 'active';        

}

点击tab_1区域时，会显示content_1，依此类推。但是当鼠标悬停在不同选项卡的区域上时，我想显示内容。你能不能帮助我，我抬头看网，但找不到任何东西，也许是因为我实际上不知道JavaScript。

所以，谢谢你的时间和帮助。

修改

这是调用TabSwitch的地方......我希望如此

<ul class="tabs">  
    <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active"><img src="img/flash.png" /></a></li>  
    <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2"><img src="img/brush.png" /></a></li>  
    <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3"><img src="img/wheel.png" /></a></li>  
</ul>

Answer 1

您可以参加onmouseover事件，因为它也支持a和li标签，另外还要检查onmouseout（非常相似）以了解两者。

这样，菜单元素的li标签看起来像：

<li onmouseover="tabSwitch('tab_1', 'content_1');"><a href="#" id="tab_1" class="active"><img src="img/flash.png" /></a></li>
<li onmouseover="tabSwitch('tab_2', 'content_2');"><a href="#" id="tab_2"><img src="img/brush.png" /></a></li>

当您将鼠标悬停在元素上时，Onmouseover将会触发。我想你从这里得到了这个想法。

将鼠标悬停在getElementById上

1 个答案: