简要描述预期的设计:我想要一个导航菜单，在悬停时显示内容。但我也在寻求灵 active 和简单性。因为每个 nav 元素的行为方式相同，我想 javascript 和 css 可以用标识每个 nav 元素的变量编写一次。到目前为止，我已经采用了多种不同的方法，但以下方法对我来说效果最好。诚然，它是痛苦的多余:
<div id="leftColumn">
<div id="nav1"
onmouseover="
document.getElementById('nav1').style.backgroundColor = 'black';
document.getElementById('nav1').style.color = 'white';
document.getElementById('content1').style.display = 'block';"
onmouseout="
document.getElementById('content1').style.display = 'none';
document.getElementById('nav1').style.color = 'black';
document.getElementById('nav1').style.backgroundColor = 'white';">
DECONSTRUCTIONS
</div>
<div id="nav2"
onmouseover="
document.getElementById('nav2').style.backgroundColor = 'black';
document.getElementById('nav2').style.color = 'white';
document.getElementById('content2').style.display = 'block';"
onmouseout="
document.getElementById('content2').style.display = 'none';
document.getElementById('nav2').style.color = 'black';
document.getElementById('nav2').style.backgroundColor = 'white';">
CONSTRUCTIONS
</div>
<div id="nav3"
onmouseover="
document.getElementById('nav3').style.backgroundColor = 'black';
document.getElementById('nav3').style.color = 'white';
document.getElementById('content3').style.display = 'block';"
onmouseout="
document.getElementById('content3').style.display = 'none';
document.getElementById('nav3').style.color = 'black';
document.getElementById('nav3').style.backgroundColor = 'white';">
OBSERVATIONS
</div>
</div>
<div id="rightColumn">
<div id="content1">deconstructions are...</div>
<div id="content2">constructions are...</div>
<div id="content3">observations are...</div>
</div>
以及相关的(也是冗余的)CSS:
#nav1 {padding-left:25px; width:200px; line-height:150%; background-color:white;}
#nav2 {padding-left:25px; width:200px; line-height:150%; background-color:white;}
#nav3 {padding-left:25px; width:200px; line-height:150%; background-color:white;}
#content1 {display:none;}
#content2 {display:none;}
#content3 {display:none;}
重申一下，我希望一切都尽可能简单，但要为将来的编辑灵活——添加 future 的导航元素和相应的内容。我已经搜索了解决方案并尝试了其他方法，但每次 javascript/jQuery 很快变得复杂并且超出了我理解和修改我喜欢的能力的范围。任何提示、建议、解决方案、解释、资源......将不胜感激。谢谢!
最佳答案
您可以为 mouseover 和 mouseout 事件创建两个单独的函数，并且可以在 html 中添加任意多个导航菜单。
这是适合您的完整解决方案。
<html>
<style type="text/css">
/*we can combine the selectors with comman if same css values available for all*/
#nav1, #nav2, #nav3{padding-left:25px; width:200px; line-height:150%; background-color:white;}
#content1, #content2, #content3 {display:none;}
</style>
<script>
function displayContent(div, contentId){
/*div is reffering the current mouseovered div*/
div.style.backgroundColor = 'black';
div.style.color = 'white';
document.getElementById(contentId).style.display = 'block';
}
function hideContent(div, contentId){
document.getElementById(contentId).style.display = 'none';
div.style.color = 'black';
div.style.backgroundColor = 'white';
}
</script>
<body>
<div id="leftColumn">
<div id="nav1" onmouseover="displayContent(this, 'content1')" onmouseout="hideContent(this, 'content1')">
DECONSTRUCTIONS
</div>
<div id="nav2" onmouseover="displayContent(this, 'content2')" onmouseout="hideContent(this, 'content2')">
CONSTRUCTIONS
</div>
</body>
<div id="nav3" onmouseover="displayContent(this, 'content3')" onmouseout="hideContent(this, 'content3')">
OBSERVATIONS
</div>
</div>
<div id="rightColumn">
<div id="content1">deconstructions are...</div>
<div id="content2">constructions are...</div>
<div id="content3">observations are...</div>
</div>
</html>
关于javascript - consolidate javascript - 用于显示内容的悬停导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21493663/