Comment écrire deux pages Web sur une seule page en HTML

Comment écrire deux pages Web dans une seule page HTML ?

Lors de la création de pages Web, nous rencontrons souvent des situations où une page doit présenter le contenu de deux pages Web différentes en même temps. À l'heure actuelle, nous pouvons utiliser certaines techniques pour obtenir l'effet d'une page présentant deux pages Web. Voyons comment présenter simultanément deux contenus Web différents sur une seule page HTML.

1. Utilisez la balise iframe

La balise iframe est une balise qui intègre une autre page HTML dans une page HTML, afin que deux contenus Web différents puissent être présentés sur une même page en même temps. Il s'écrit ainsi :

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

Parmi eux, l'attribut src est utilisé pour spécifier l'adresse de la page web intégrée.

Nous pouvons positionner et dimensionner la balise iframe grâce aux styles CSS, afin que le contenu des deux pages Web soit présenté sur la même page.

2. Utilisez JavaScript

Une autre façon de mettre en œuvre une page et deux pages Web consiste à utiliser JavaScript. En utilisant JavaScript, vous pouvez basculer le contenu de différentes pages Web dans une page HTML, obtenant ainsi l'effet de présenter plusieurs pages Web sur une seule page.

Nous pouvons utiliser des bibliothèques JavaScript telles que jQuery pour charger dynamiquement des pages Web, par exemple :

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

Dans le code ci-dessus, nous utilisons CSS pour configurer un conteneur et utilisons les classes tab et tab-content pour représenter le bouton de commutation. et le contenu respectivement. Afin d'obtenir l'effet de changement de page Web, nous devons surveiller l'événement de clic du bouton de changement via du code JavaScript pour afficher et masquer différents contenus. Le code spécifique est le suivant :

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

Dans le code JavaScript ci-dessus, nous appliquons la méthode .click() à la classe .tab, de sorte que cette méthode soit déclenchée lorsque vous cliquez sur un bouton de commutation. Tout d'abord, obtenez l'ID de. le contenu à changer, puis ajoutez le contenu actuel. Les boutons et le contenu sélectionnés sont marqués comme « actifs », et les boutons et le contenu restants ne seront pas affichés.

3. Utiliser la technologie Ajax

Une autre façon d'afficher plusieurs pages Web en même temps consiste à utiliser la technologie Ajax. La technologie Ajax nous permet d'obtenir des données de manière asynchrone et de mettre à jour le contenu d'une page Web sans actualiser la page actuelle. Nous pouvons utiliser la technologie Ajax pour obtenir l’effet d’afficher plusieurs pages Web sur une seule page en même temps.

Les étapes spécifiques sont les suivantes :

1. Créez un conteneur en HTML comme suit :

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

2 Définissez un bouton bascule comme suit :

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

3. Écrivez le code JavaScript comme suit :

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

Cette fonction implémente. l'utilisation de la technologie Ajax pour charger de manière asynchrone différents contenus de pages Web. Lorsque vous cliquez sur le bouton, cette fonction demandera le contenu de la page Web correspondant, puis mettra à jour le contenu du conteneur pour compléter l'effet d'affichage de la page Web.

Résumé :

Il existe trois méthodes ci-dessus pour réaliser une page afin de présenter deux contenus Web différents en même temps. Cette fonction peut être réalisée en utilisant les balises iframe, la technologie JavaScript et Ajax. La méthode à utiliser doit être choisie en fonction de la situation réelle. Mais quelle que soit la méthode utilisée, la page doit être mise en page, positionnée et stylisée pour obtenir l'effet de présentation final.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!