整合 javascript - 用于显示内容的悬停导航答案

【问题标题】：consolidate javascript - hover navigation for revealing content整合 javascript - 用于显示内容的悬停导航
【发布时间】：2014-02-01 03:09:31
【问题描述】：

简要描述预期的设计：我想要一个导航菜单，在悬停时显示内容。但我也在寻求灵活性和简单性。因为每个 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;}

重申一下，我想让一切都尽可能简单，但可以灵活地用于未来的编辑 - 用于添加未来的导航元素和相应的内容。我已经搜索了解决方案并尝试了其他方法，但是每次 javascript/jQuery 都很快变得复杂，超出了我理解和修改为我喜欢的能力。任何提示、建议、解决方案、解释、资源......将不胜感激。谢谢！

【问题讨论】：

标签： javascript jquery html css simplify

【解决方案1】：

您可以为 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>

【讨论】：

太好了，谢谢。并感谢您的解释，非常有帮助。

【解决方案2】：

而不是 java 脚本来更改颜色。CSS 具有属性 :hover 在某些元素上发生悬停时更改，并且 onmouseover 和 onmouseout 传递带有参数的函数以便显示和隐藏内容。我附上了完整的代码参考。

<!DOCTYPE html>
<html>

    <head>
        <style>
            #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;
            }

悬停改变颜色的 CSS

            #nav1:hover, #nav2:hover, #nav3:hover {
                background:black;
                color:white;
            }
        </style>

JavaScript

        <script>
            function display(contentID) {
                document.getElementById(contentID).style.display = 'block';
            }

            function hide(contentID) {
                document.getElementById(contentID).style.display = 'none';
            }
        </script>
    </head>

    <body>
        <div id="leftColumn">
            <div id="nav1" onmouseover="display('content1')" onmouseout="
hide('content1');
">DECONSTRUCTIONS</div>
            <div id="nav2" onmouseover="display('content2')" onmouseout="
hide('content2');
">CONSTRUCTIONS</div>
            <div id="nav3" onmouseover="display('content3')" onmouseout="
hide('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>
    </body>

</html>

【讨论】：