1

单击 Ike's，您会注意到地图下方出现了一个 div。尝试点击链接。它不工作。

我正在使用它来显示/隐藏 div 的点击

function ikesClick() {
            filler.style.display='none';
            FrontDeskDesc.style.display='none'; 
            LoungeDesc.style.display='none';    
            StudyDesc.style.display='none'; 
            IkesDesc.style.display='inline';    
        };

如果您查看页面源代码，您可以在那里看到整个 Javascript。

我的问题是，我该怎么做才能使链接可点击？

我几乎可以肯定这是因为它显示无/内联的方式。

您可以在此处观察 HTML：

<section id="roomInfo">
    <section id="filler" style="display:inline">
    Hover over or select a colored area for details about individual rooms and locations in the library.
    </section>
    <section id="IkesDesc" style="display:none;">
    <h1>Ike's - Late Night Diner</h1>
    <p>
    In the hub of President’s Park, Ike’s provides a late night dining option.  Visit <a href="dining.gmu.edu">dining.gmu.edu</a> for hours of operation.
    </p>
    <img src="Ikes.JPG" style="max-width:500px; width:100%;" alt="Ike's Facade" />
    </section>
    <section id = "FrontDeskDesc" style="display:none;">
    Get your temporary keys and stuff here!
    </section>
    <section id ="LoungeDesc" style="display:none;">
    loungin'
    </section>
    <section id ="StudyDesc" style="display:none;">
    Studying for finals yo
    </section>
</section><!--end room info-->

在dining.gmu.edu 的链接所在的“IkesDesc”部分下问题仍然存在。

4

1 回答 1

1

首先，您的链接不完整：

<a href="dining.gmu.edu">dining.gmu.edu</a>

所以这应该是这样的：

<a href="https://gmu.sodexomyway.com/home.xhtml">dining.gmu.edu</a>

此外，由于您已经在页面上运行了 jQuery，您可能希望将代码简化为：

$("#Ikes").click(function() {

  $(".objects").hide();
  $(this).show();

});

哪里Ikes是id可点击的img，.objects是所有可点击图像的类别。

另外，我看到无法Ikes在 FireFox 中单击。所以你可能也想调查一下。

更新

似乎导致问题的是您的布局：

你使用position:relative;andposition:absolute;自始至终，而这在“生成” div 时非常危险。

例如：

#svg {
    display: block;
    left: 0;
    margin: -55px 0 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#roomInfo {
    background-color: #CCCCCC;
    margin-top: 75%;
    outline: 1px solid gray;
    padding: 5px;
    width: 100%;
}

此外，您似乎将某些元素定位为好像它们具有绝对位置，而它们实际上是相对放置的。

我建议您将总体布局设为相对，使其具有响应性，并且可以处理较小的屏幕和 div 的生成。

我在这个jsFiddle中帮助了你一点，但剩下的留给你。

另外，看看我的 jQuery 代码，它基本上将THIS简化为我的 jsFiddle 中使用的 jQuery：

$(document).ready(function() {
    $("#area1").click(function() {
       $(".extra").hide();
       $("#IkesDesc").show();
    });

    $("#area2").click(function() {
       $(".extra").hide();
       $("#FrontDeskDesc").show();
    });

    $("#area3").click(function() {
       $(".extra").hide();
       $("#LoungeDesc").show();
    });

    $("#area4").click(function() {
       $(".extra").hide();
       $("#StudyDesc").show();
    });
});

我使示例正常工作，因此您可以随意复制/粘贴。

另外，我添加了以下内容：

var position = $("#IkesDesc").position();
   scroll(0,position.top);

这是一个非常酷的技巧，它会滚动到刚刚出现的 div，这样用户实际上会注意到发生了一些变化（我有点想念你当前站点中的那个）。

您可以在此处将其作为工作示例进行检查。

我希望这对你有所帮助！

祝你好运！

于 2013-07-03T20:09:32.873 回答