HTMLで2つのWebページを1つのページに記述する方法

HTML で 1 つのページに 2 つの Web ページを記述する方法

Web ページを作成するとき、1 つのページで 2 つの異なる Web コンテンツを同時に表示する必要がある状況によく遭遇します。現時点では、いくつかのテクニックを使用して、1 つのページに 2 つの Web ページを表示する効果を実現できます。 2 つの異なる Web コンテンツを 1 つの HTML ページに同時に表示する方法を紹介します。

1. iframe タグを使用する

iframe タグは、HTML ページに別の HTML ページを埋め込むタグで、2 つの異なる Web コンテンツを 1 つのページに同時に表示できます。 。

<iframe src="网页1地址"></iframe>
<iframe src="网页2地址"></iframe>

このうち、src属性は埋め込みWebページのアドレスを指定するために使用されます。

CSS スタイルを使用して iframe タグの位置とサイズを調整できるため、2 つの Web ページのコンテンツが同じページに表示されます。

2. JavaScript を使用する

2 つの Web ページを 1 つのページに実装するもう 1 つの方法は、JavaScript を使用することです。 JavaScript を使用すると、HTML ページ内でさまざまな Web ページのコンテンツを切り替えることができ、それによって 1 つのページに複数の Web ページを表示する効果が得られます。

jQuery などの JavaScript ライブラリを使用して、Web ページを動的に読み込むことができます。例:

<div class="container">
  <div class="tabs">
    <div class="tab" data-tab="tab1">网页1</div>
    <div class="tab" data-tab="tab2">网页2</div>
  </div>
  <div class="content">
    <div class="tab-content active" id="tab1">
      <!-- 网页1内容 -->
    </div>
    <div class="tab-content" id="tab2">
      <!-- 网页2内容 -->
    </div>
  </div>
</div>

上記のコードでは、CSS を使用してコンテナを設定し、タブとタブを使用します。 -content クラスはそれぞれトグル ボタンとコンテンツを表します。 Web ページ切り替えの効果を実現するには、JavaScript コードを通じて切り替えボタンのクリック イベントを監視し、さまざまなコンテンツを表示および非表示にする必要があります。具体的なコードは次のとおりです:

$(document).ready(function(){
  $('.tabs .tab').click(function(){
    var tab_id = $(this).attr('data-tab');
    $('.tabs .tab').removeClass('active');
    $('.tab-content').removeClass('active');
    $(this).addClass('active');
    $("#"+tab_id).addClass('active');
  });
});

上記の JavaScript コードでは、.click() メソッドを .tab クラスに適用し、いずれかのスイッチ ボタンがクリックされたときにこのメソッドがトリガーされるようにします。切り替え対象のコンテンツのIDを取得し、現在選択されているボタンとコンテンツを「アクティブ」にすると、残りのボタンとコンテンツは表示されなくなります。

3. Ajax テクノロジーを使用する

複数の Web ページを同時に表示するもう 1 つの方法は、Ajax テクノロジーを使用することです。 Ajax テクノロジーを使用すると、現在のページを更新せずにデータを非同期に取得し、Web ページのコンテンツを更新できます。 Ajax テクノロジーを使用すると、1 ページに複数の Web ページを同時に表示する効果を実現できます。

具体的な手順は次のとおりです:

1. 以下に示すように、HTML でコンテナを作成します:

<div id="ajax-content"></div>

2. 以下に示すように、トグル ボタンを定義します:

<ul>
  <li><a href="javascript:;" onclick="loadPage('网页1地址')">网页1</a></li>
  <li><a href="javascript:;" onclick="loadPage('网页2地址')">网页2</a></li>
</ul>

3. 次のように JavaScript コードを記述します:

function loadPage(pageUrl) {
  $.ajax({
    url: pageUrl,
    success: function(data) {
      $("#ajax-content").html(data);
    }
  });
}

この関数は、Ajax テクノロジの使用を実装して、さまざまな Web ページ コンテンツを非同期的に読み込みます。ボタンをクリックすると、関数は対応する Web を要求します。ページのコンテンツを更新し、コンテナのコンテンツを更新して Web ページの表示効果を完成させます。

まとめ:

上記は、1 ページで 2 つの異なる Web コンテンツを同時に表示するための 3 つの方法であり、この機能は iframe タグ、JavaScript、Ajax テクノロジーを使用して実現できます。どの方法を使用するかは、実際の状況に基づいて選択する必要があります。ただし、どの方法を使用する場合でも、最終的なプレゼンテーション効果を実現するには、ページのレイアウト、位置、スタイルを設定する必要があります。

以上がHTMLで2つのWebページを1つのページに記述する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。