Question

很抱歉，如果这个问题解释得有点糟糕，JQuery不是我的＆＃34; native＆＃34;语言，所以我会尽力解释。（我已经设置了一个帮助显示代码的jsfiddle）http://jsfiddle.net/6eYYR/

我在这里有一个网页：http://www.waranuwater.com.au/pages/test-1我有一位同事帮助我，我现在正在与Jquery接触。

向下滚动到第二个区域，我有两个并排设置的div，一个在左边包含一个imagemap，另一个在右边a＆＃34;内容区域＆＃34;与HTML内容。＆＃34;内容区＆＃34;包含一些文本，当用户将鼠标悬停在图像映射的一部分上时，这些文本将会更改。

当用户将鼠标悬停在图片地图上时，我已设法获取内容（我已将其设为黑色，以便更容易查看时间），以便在图像地图的相关部分悬停时进行更改，但是我无法解决当悬停发生时如何让初始内容消失（以＆＃34开始的位;完全污染物去除＆＃34;）

这是我目前的Jquery代码：

 function showHideDivs(indx){
            hideDivs();
            oShowHideDivs[indx].style.display = 'block';
        }
        function hideDivs(){
            for(i=0; i < oShowHideDivs.length; i++){
                oShowHideDivs[i].style.display = 'none';
            }
        }
        window.onload=function(){
            oShowHideDivs =  
document.getElementById('ccontainer').getElementsByTagName('div');
            var oMap = document.getElementById('myMap');
            for(i=0; i < oMap.areas.length; i++){
                oMap.areas[i].indx = i;
                oMap.areas[i].onmouseover=function(){showHideDivs(this.indx);}
                oMap.areas[i].onmouseout = hideDivs;
            }
        }

我在这里遗漏了什么吗？我是否需要告诉Jquery＆＃34;隐藏＆＃34;现有的文本？如果是的话，我该如何去做呢？

提前致谢

Answer 1

我可以在你的代码中看到jquery引用，为什么不使用jquery？以下是解决方案

为需要隐藏

之类的元素提供类名

<h3 class="tohide">Complete Contaminant Removal</h3>
<p class="tohide">.......
.....

更新方法：

function showHideDivs(indx){
            hideDivs();
            oShowHideDivs[indx].style.display = 'block';
            $(".tohide").hide();
        }

隐藏所有div时，您可能需要显示原始元素

function hideDivs(){
            for(i=0; i < oShowHideDivs.length; i++){
                oShowHideDivs[i].style.display = 'none';
            }
            $(".tohide").show();
        }

将jquery用于所有此类任务，它将减少开发时间，工作量和代码。

如果您仍想使用原生javascript，则需要在<span id="tohide">中包含需要隐藏的所有元素，并根据悬停选择显示隐藏此元素。

Answer 2

您的“初始内容”不在任何div内，因此它不受您的show / hide div逻辑的影响。我建议先将它放在自己的div中，就像其他人一样：

<div id="ccontainer">
    <div id="Sediment-Filter">...</div>
    <div id="Anti-Bacterial-Filter">...</div>
    <div id="Proteus-RO-Membrane">...</div>
    <div id="Activated-Coconut-Carbon">...</div>
    <div id="Initial-Contents">
        <h3>Complete Contaminant Removal</h3>
        <p>What truly sets this system apart ...
        ...
    </div>
</div>

现在，当调用hideDivs时，它将像其他人一样被隐藏。当隐藏其他div时，您的下一步是默认显示：

    function hideDivs(showInitial){
        for(i=0; i < oShowHideDivs.length; i++){
            oShowHideDivs[i].style.display = 'none';
        }
        if ( showInitial )
            document.getElementById('Initial-Contents').style.display = 'block';
    }

...除非您展示特定的div：

function showHideDivs(indx){
    hideDivs(false); // Don't show initial contents
    oShowHideDivs[indx].style.display = 'block';
}

请注意，当showInitial是Event对象时，oMap.areas[i].onmouseout = hideDivs;是“真实的”，因此您仍然可以直接在{{1}}行中使用它。

（顺便说一句，你的问题不是使用jQuery，只是使用vanilla JavaScript - 尽管页面中有其他地方有jQuery）

内容在悬停时被替换，但现有文本未被删除

2 个答案: