Question

所以我正在使用jQuery Min Tools“Overlay”插件，并且我认为我过度思考整个过程..

我有一张图片地图（是的，我仍然使用图片地图）。带有3个独立区域的坐标：

   <map name="Map" id="Map">
    <area shape="poly" coords="7,13,146,14,147,68,116,68,117,123,4,124" href="#" rel="#know" /> 
    <area shape="rect" coords="118,70,290,227" href="#" rel="#facility" />
    <area shape="poly" coords="262,5,260,68,290,69,291,169,380,170,379,6" href="#" rel="#detect" /> 
    </map>

现在，当页面最初加载时，我有一个显示介绍内容的DIV：

<div id="mammogram-content">
     <div id="intro">
          <h2>header</h2>
               <p>content here</p>
     </div><!--end Intro -->


</div><!--end mammogram-content-->

因此，当访问者访问该页面时，他们会看到该介绍内容。然后他们可以点击图像地图上的3个区域，当他们点击介绍内容时，fadeOut将会淡出，新内容将会淡入。

这是我现在使用的脚本，以及jqery tools min.js

<script type="text/javascript">
$(document).ready(function() {
    $('area[rel]').overlay();

        $('area[rel]').click(function() {
            $('#intro').fadeOut(500);
        return false;
        });


});
</script>

介绍淡出很好，但其他3个div我不能淡入其中3个同时褪色它，我不想要...我想在容器中单独显示每个div他们点击了他们......：

你可以在这里看到可怕的尝试：https://www.bcidaho.com/mammography/

我也无法让3 DIVS正确地坐在容器内......

我能以某种方式简化这个吗？我真的需要jquery min工具来显示和隐藏容器内的div使用[rel]和图像映射吗？

希望我能正确地传达这一点，至少是我的方向。

Answer 1

你确实传达了它。你的问题是你在div上设置了position，left和top属性。

删除它们，它将正确地放在容器内。

除非你想淡出淡出，否则你不需要jQuery Tools来做你正在做的事情。您可以使用标准的jQuery或Javascript轻松地将一个容器中的内容替换为另一个容器 - 这很简单：

$("#container").html($("#know").html());

然后将容器放入“mammogram-content”div中，并将上述javascript附加到图像地图中每个链接的点击事件中，然后就可以了。

jQuery show / hide - 我在想这个吗？

1 个答案: