Question

Click on 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-->

问题仍然存在于“IkesDesc”部分，其中指向dining.gmu.edu的链接。

Answer 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的{{1}}，img是所有可点击图片的类。

另外，我发现无法在FireFox中点击.objects。所以你可能也想研究一下。

更新

导致问题的原因是你的布局：

你在整个过程中使用Ikes和position:relative;，而在'产生'div时这是非常危险的。

例如：

position:absolute;

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

我建议你让总布局相对，以便它具有响应性，可以处理小屏幕和div的产生。

我帮助了你jsFiddle，但我会把剩下的留给你。

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

#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%;
}

我让这个例子正常工作，所以你可以随意复制/粘贴。

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

$(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();
    });
});

这是一个非常酷的技巧，将滚动到刚刚出现的div，以便用户实际注意到某些内容发生了变化（我有点想念你当前的网站）。

您可以将其作为工作示例HERE进行检查。

我希望能帮到你！

祝你好运！

Javascript显示/隐藏链接不起作用

1 个答案:

更新