Question

简要描述预期的设计：我想要一个导航菜单，在悬停时显示内容。但我也在寻求灵活性和简单性。因为每个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很快变得复杂并超出了我理解和修改的能力。任何提示，建议，解决方案，解释，资源......将不胜感激。谢谢！

Answer 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>

Answer 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>

整合javascript - 悬停导航以显示内容

2 个答案: