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

你会注意到地图下面出现了一个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

我的问题是，如何使链接可点击？

我几乎可以肯定这是因为它显示none/inline的方式

您可以在此处查看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”部分，该部分指向dinning.gmu.edu的链接不完整。

首先，您的链接不完整：

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

其中，

Ikes

是可点击的

img

的

id

，而

是所有可点击图像的类

另外，我发现在FireFox中不可能单击
Ikes
。所以你可能也想调查一下

更新
导致问题的原因似乎是您的布局：

使用
位置：相对和
位置：绝对自始至终，而这在“繁殖”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的生成等问题

这件事我帮了你一点忙，但剩下的就留给你了

另外，看看我的jQuery代码，它基本上简化为JSFIDLE中使用的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，这样用户就会注意到一些变化（我有点错过了当前站点中的变化）

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

我希望这对你有帮助

祝你好运
 首先，您的链接不完整：

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

其中，
Ikes
是可点击的
img
的
id
，而
是所有可点击图像的类

另外，我发现在FireFox中不可能单击
Ikes
。所以你可能也想调查一下

更新
导致问题的原因似乎是您的布局：

使用
位置：相对和
位置：绝对自始至终，而这在“繁殖”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的生成等问题

这件事我帮了你一点忙，但剩下的就留给你了

另外，看看我的jQuery代码，它基本上简化为JSFIDLE中使用的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，这样用户就会注意到一些变化（我有点错过了当前站点中的变化）

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

我希望这对你有帮助

祝你好运
 它不是jquery mate；）请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点——否则，一旦问题解决，这个问题将对未来的访问者失去任何价值。发布一个能证明你的问题的帖子会帮助你得到更好的答案。有关更多信息，请参阅“谢谢！”！该链接不可单击，因为该元素正在覆盖该元素。您可以使用Chrome看到这一点，您右键单击链接并按“Inspect Element”，您会注意到源代码弹出并突出显示标记（或其某个子项）。如果是高度属性问题，或者是与class=“active”有关的问题，我对svg的了解还不足以了解解决方案请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点——否则，一旦问题解决，这个问题将对未来的访问者失去任何价值。发布一个能证明你的问题的帖子会帮助你得到更好的答案。有关更多信息，请参阅“谢谢！”！该链接不可单击，因为该元素正在覆盖该元素。您可以使用Chrome看到这一点，您右键单击链接并按“Inspect Element”，您会注意到源代码弹出并突出显示标记（或其某个子项）。如果是高度属性问题，或者是与class=“active”有关的问题，我对svg的了解还不足以了解解决方案；虽然这可能是个好主意。但你甚至不能在那一部分突出显示文本或右键单击图像。我的理解是，这样做的目的是找到问题的答案，然后发布你的答案，而不是相反；到目前为止，这还不能回答这个问题，因此投票被否决。如果这成为答案，我将取消否决票。谢谢！我试图用你提到的方法简化我的代码，但那只会使它根本不起作用。。Retsam完美地描述了我的问题，我不知道为什么会出现这种情况。另外，我只在Chrome和我的Android设备上测试过这个问题，感谢大家的提醒，我会检查firefox的问题。编辑我在我的工作电脑上，它有最新版本的firefox，一切似乎都很好。