0

わかりました、いくつかの異なることをしようとしていますが、それらはすべて非常に単純です。私がやろうとしていることの一部を与える答えしか見つけることができず、さまざまな答えを混ぜ合わせて一致させると、それらはうまく機能しません。具体的に聞いたほうがいいと思いました。

ここに画像の説明を入力

下部の非表示の div は画像で満たされているため、ページが読み込まれたときではなく、リンクがクリックされたときにのみ読み込まれるようにします。各非表示の div には、上位 3 つの div をターゲットとする独自の 3 つの div があるため、その非表示の div のリンクをクリックすると、その非表示の div 内の 3 つの div すべてが上位 3 つの div に読み込まれます。1 つのリンクでさまざまなイベントをトリガーする方法を知っていると確信しているので、これを行うためのより簡単な方法を知らない限り、私を助ける必要はありません。サポートが必要な主な事項は次のとおりです。

  • ページの読み込みではなく、クリック時にのみ div コンテンツを読み込む
  • div をターゲットにして、他の div コンテンツをロードする
  • リンクをクリックして新しい非表示の div を開くと、表示されていた他の非表示の div が消えます
  • また、これは技術的な Web サイトであるため、新しい div を切り替えたりロードしたりするときに、ある種の技術的な移行があるとよいでしょう。他にフェードが機能しない場合でも、コンテンツをロードするためのさまざまなトランジション効果を持つコードまたは Web ページをたまたま知っている場合は、この部分で私を助ける必要はありません。

私は実際にあなたが提案するものと競合する事前に書かれたコードをまだ持っていないので、あなたは何でも提案することができます. すべてを書き出す必要はありません。例を見てみましょう。多分。

個別の回答があることは承知していますが、それらを一緒に機能させるのに苦労しました。または、必要なことの一部を実行しますが、他のことは実行しません。代わりに誰かが5分ほどでコードを作成できると思った. ありがとう。

編集：コードを追加しますが、あまり役に立たないと思います。

<div id="menu"> <a> -Cyber glasses Link- that opens cyberglasses div and loads it into presentation div </a></div>

<div id="presentation">
<div id="div-pic-1">Empty space to load stuff into</div>
<div id="center-content">Empty space to load stuff into</div>
<div id="div-pic-2">Empty space to load stuff into</div>
</div>


<div id="cyberglasses">(this div does not appear on pageload and only loads on click of the menu link named "Cyber glasses Link" at top of page)

<div id="cg1"> picture 1 of cyber glasses to load into id div-pic-1 </div>
<div id="cgcontent"> description of cyber glasses to load into id center-content</div>
<div id="cg2"> picture 2 of cyber glasses to load into id div-pic-2<div>

</div>

上部の -Cyber​​ glasses Link- という名前のメニュー リンクは、div cg1 を div-pic-1 に読み込みます

cgcontent を center-content に分割します

cg2 を div-pic-2 に分割します

すべて同時に。ただし、ページの読み込み時に読み込まれる唯一の div は、プレゼンテーション div とメニュー div であり、サイバーグラス div ではありません。Cyber​​glasses div は、Cyber​​ Glasses リンクをクリックしたときにのみ読み込まれます。

4

1 に答える 1

0 
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
    <body>
        <div id="navigation">
            <a href="welcome.html" rel="#content">Welcome</a>
            <a href="frog.html" rel="#image">Frog</a>
            <a href="lamma.html" rel="#image">Lamma</a>
        </div>
        <div id="content"></div>
        <div id="image"></div>
        <script>
          $(function(){
            $('#navigation').on('click','a',function(e){
              e.preventDefault();
              $($(this).attr('rel')).load($(this).attr('href'));
            });
          });
        </script>
    </body>
</head>
</html>

デモ: https://oteck.co.uk/sample/load.html

于 2013-10-28T21:01:30.443 に答える