So schreiben Sie zwei Webseiten in einer Seite in HTML

So schreiben Sie zwei Webseiten in einer HTML-Seite

Beim Erstellen von Webseiten stoßen wir häufig auf Situationen, in denen eine Seite den Inhalt von zwei verschiedenen Webseiten gleichzeitig darstellen muss. Zu diesem Zeitpunkt können wir einige Techniken verwenden, um den Effekt zu erzielen, dass eine Seite zwei Webseiten präsentiert. Lassen Sie uns vorstellen, wie Sie zwei verschiedene Webinhalte gleichzeitig auf einer HTML-Seite präsentieren können.

1. Verwenden Sie das Iframe-Tag

Das Iframe-Tag ist ein Tag, der eine andere HTML-Seite in eine HTML-Seite einbettet, sodass zwei verschiedene Webinhalte gleichzeitig auf einer Seite dargestellt werden können. Es ist wie folgt geschrieben:

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

Unter diesen wird das src-Attribut verwendet, um die Adresse der eingebetteten Webseite anzugeben.

Wir können das Iframe-Tag über CSS-Stile positionieren und skalieren, sodass der Inhalt der beiden Webseiten auf derselben Seite dargestellt wird.

2. Verwenden Sie JavaScript

Eine andere Möglichkeit, eine Seite und zwei Webseiten zu implementieren, ist die Verwendung von JavaScript. Mithilfe von JavaScript können Sie unterschiedliche Webseiteninhalte in einer HTML-Seite austauschen und so den Effekt erzielen, mehrere Webseiten auf einer Seite darzustellen.

Wir können JavaScript-Bibliotheken wie jQuery verwenden, um Webseiten dynamisch zu laden, zum Beispiel:

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

Im obigen Code verwenden wir CSS, um einen Container einzurichten, und verwenden die Tab- und Tab-Content-Klassen, um die Umschalttaste darzustellen bzw. Inhalt. Um den Effekt des Webseitenwechsels zu erzielen, müssen wir das Klickereignis der Wechselschaltfläche mithilfe von JavaScript-Code überwachen, um verschiedene Inhalte anzuzeigen und auszublenden. Der spezifische Code lautet wie folgt:

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

Im obigen JavaScript-Code wenden wir die .click()-Methode auf die .tab-Klasse an, sodass diese Methode ausgelöst wird, wenn auf eine beliebige Umschaltschaltfläche geklickt wird. Zuerst wird die ID von abgerufen Wählen Sie den Inhalt aus, der umgeschaltet werden soll, und fügen Sie dann den aktuellen hinzu. Die ausgewählten Schaltflächen und Inhalte werden als „aktiv“ markiert und die verbleibenden Schaltflächen und Inhalte werden nicht angezeigt.

3. Ajax-Technologie verwenden

Eine andere Möglichkeit, mehrere Webseiten gleichzeitig anzuzeigen, ist die Verwendung der Ajax-Technologie. Die Ajax-Technologie ermöglicht es uns, asynchron Daten abzurufen und Webseiteninhalte zu aktualisieren, ohne die aktuelle Seite zu aktualisieren. Mithilfe der Ajax-Technologie können wir den Effekt erzielen, dass mehrere Webseiten gleichzeitig auf einer Seite angezeigt werden.

Die spezifischen Schritte sind wie folgt:

1. Erstellen Sie einen Container in HTML wie folgt:

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

3. Schreiben Sie JavaScript-Code wie folgt:

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

Diese Funktion wird implementiert Die Verwendung der Ajax-Technologie zum asynchronen Laden verschiedener Webseiteninhalte. Wenn auf die Schaltfläche geklickt wird, fordert diese Funktion den entsprechenden Webseiteninhalt an und aktualisiert dann den Inhalt des Containers, um den Webseitenanzeigeeffekt abzuschließen.

Zusammenfassung:

Die oben genannten Möglichkeiten sind drei Möglichkeiten, zwei verschiedene Webinhalte gleichzeitig auf einer Seite darzustellen. Diese Funktion kann mithilfe von Iframe-Tags, JavaScript und Ajax-Technologie erreicht werden. Welche Methode verwendet werden soll, muss basierend auf der tatsächlichen Situation ausgewählt werden. Aber egal welche Methode verwendet wird, die Seite muss gestaltet, positioniert und gestaltet werden, um den endgültigen Präsentationseffekt zu erzielen.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie zwei Webseiten in einer Seite in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!