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 全体が表示されます。

私の質問は、リンクをクリックできるようにするにはどうすればよいですか?

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

この問題は、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;and全体で使用しますがposition: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であなたを少し助けましたが、残りはあなたに任せます。

また、基本的にこれを私のjsFiddleで使用されているjQueryに縮小する私の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 に答える