Bagaimana untuk menulis dua halaman web dalam satu halaman dalam html

Cara menulis dua halaman web dalam satu halaman HTML

Apabila membuat halaman web, kita sering menghadapi situasi di mana satu halaman perlu membentangkan kandungan dua halaman web yang berbeza pada masa yang sama. Pada masa ini, kita boleh menggunakan beberapa teknik untuk mencapai kesan satu halaman membentangkan dua halaman web. Mari kita perkenalkan cara mempersembahkan dua kandungan web yang berbeza dalam satu halaman HTML pada masa yang sama.

1 Gunakan teg iframe

Teg iframe ialah teg yang membenamkan halaman HTML lain dalam halaman HTML, supaya dua kandungan web yang berbeza boleh dibentangkan dalam satu halaman pada masa yang sama . Ia ditulis seperti berikut:

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

Antaranya, atribut src digunakan untuk menentukan alamat halaman web terbenam.

Kami boleh meletakkan dan mensaiz teg iframe melalui gaya CSS, supaya kandungan kedua-dua halaman web dipaparkan pada halaman yang sama.

2. Gunakan JavaScript

Cara lain untuk melaksanakan dua halaman web pada satu halaman ialah menggunakan JavaScript. Dengan menggunakan JavaScript, anda boleh menukar kandungan halaman web yang berbeza dalam halaman HTML, dengan itu mencapai kesan membentangkan berbilang halaman web pada satu halaman.

Kami boleh menggunakan perpustakaan JavaScript seperti jQuery untuk memuatkan halaman web secara dinamik, contohnya:

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

Dalam kod di atas, kami menggunakan CSS untuk menyediakan bekas dan menggunakan tab dan tab -kelas kandungan masing-masing Mewakili butang togol dan kandungan. Untuk mencapai kesan penukaran halaman web, kami perlu memantau peristiwa klik butang penukaran melalui kod JavaScript untuk memaparkan dan menyembunyikan kandungan yang berbeza. Kod khusus adalah seperti berikut:

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

Dalam kod JavaScript di atas, kami menggunakan kaedah .click() pada kelas .tab, supaya kaedah ini akan dicetuskan apabila mana-mana butang suis diklik Mula-mula. dapatkan ID kandungan untuk ditukar , dan kemudian tandai butang dan kandungan yang dipilih sebagai "aktif", dan butang dan kandungan yang selebihnya tidak akan dipaparkan.

3. Gunakan teknologi Ajax

Cara lain untuk memaparkan berbilang halaman web pada masa yang sama ialah menggunakan teknologi Ajax. Teknologi Ajax membolehkan kami mendapatkan data secara tidak segerak dan mengemas kini kandungan halaman web tanpa memuat semula halaman semasa. Kita boleh menggunakan teknologi Ajax untuk mencapai kesan memaparkan berbilang halaman web pada satu halaman pada masa yang sama.

Langkah khusus adalah seperti berikut:

1 Cipta bekas dalam HTML seperti berikut:

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

2 Tentukan butang togol seperti berikut:

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

3. Tulis kod JavaScript seperti berikut:

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

Fungsi ini melaksanakan pemuatan tak segerak bagi kandungan halaman web yang berbeza menggunakan teknologi Ajax Apabila butang diklik, fungsi akan meminta kandungan halaman web yang sepadan, dan kemudian Kemas kini kandungan bekas untuk melengkapkan kesan paparan halaman web.

Ringkasan:

Di atas ialah tiga cara untuk mempersembahkan dua kandungan web yang berbeza pada satu halaman pada masa yang sama Fungsi ini boleh dicapai menggunakan tag iframe, JavaScript dan teknologi Ajax. Kaedah mana yang hendak digunakan perlu dipilih berdasarkan situasi sebenar. Tetapi tidak kira kaedah yang digunakan, halaman perlu dibentangkan, diletakkan dan digayakan untuk mencapai kesan pembentangan akhir.

Atas ialah kandungan terperinci Bagaimana untuk menulis dua halaman web dalam satu halaman dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!