3

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

我在这里有一个网页：http ://www.waranuwater.com.au/pages/test-1我有一位同事帮助我，达到我现在使用 Jquery 的目的。

向下滚动到第二个区域，我并排设置了两个 div，一个在左侧包含一个图像映射，另一个在右侧一个包含 html 内容的“内容区域”。“内容区域”包含一些文本，当用户将鼠标悬停在图像地图的一部分上时，这些文本会发生变化。

当图像地图的相关部分悬停时，当用户将鼠标悬停在图像地图上时，我已经设法让内容（我将其设为黑色以便暂时更容易看到）进行更改，但我无法工作当悬停发生时如何使初始内容消失（以“完全去除污染物”开头的位）

这是我当前的 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“隐藏”现有文本？如果需要，我将如何去做？

提前致谢

4

2 回答 2

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">并根据悬停选择显示隐藏此元素。

于 2012-12-19T04:51:27.757 回答
0

您的“初始内容”不在 anydiv中，因此它不会受到您的显示/隐藏 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;在行中使用它。

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

于 2012-12-19T04:51:35.453 回答