How to write two web pages in one page in html

How to write two web pages in one page in HTML

When making web pages, we often encounter situations where one page needs to present two different web content at the same time. At this time, we can use some techniques to achieve the effect of one page presenting two web pages. Let's introduce how to present two different web content in one HTML page at the same time.

1. Use the iframe tag

The iframe tag is a tag that embeds another HTML page in an HTML page, so that two different web content can be presented in one page at the same time. It is written as follows:

<iframe src="%E7%BD%91%E9%A1%B51%E5%9C%B0%E5%9D%80"></iframe>
<iframe src="%E7%BD%91%E9%A1%B52%E5%9C%B0%E5%9D%80"></iframe>

Among them, the src attribute is used to specify the embedded web page address.

We can position and size the iframe tag through CSS styles, so that the content of the two web pages is presented on the same page.

2. Use JavaScript

Another way to implement two web pages on one page is to use JavaScript. By using JavaScript, you can switch different web page content in an HTML page, thereby achieving the effect of presenting multiple web pages on one page.

We can use JavaScript libraries such as jQuery to dynamically load web pages, for example:

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

In the above code, we use CSS to set up a container, and use the tab and tab-content classes respectively Represents toggle buttons and content. In order to achieve the effect of web page switching, we need to monitor the click event of the switching button through JavaScript code to display and hide different content. The specific code is as follows:

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

In the above JavaScript code, we apply the .click() method to the .tab class, so that this method will be triggered when any switch button is clicked. First, get the ID of the content to be switched. , and then mark the currently selected button and content as "active", and the remaining buttons and content will not be displayed.

3. Use Ajax technology

Another way to display multiple web pages at the same time is to use Ajax technology. Ajax technology allows us to asynchronously obtain data and update web page content without refreshing the current page. We can use Ajax technology to achieve the effect of displaying multiple web pages on one page at the same time.

The specific steps are as follows:

1. Create a container in HTML, as shown below:

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

2. Define the toggle button, as shown below:

• 网页1
• 网页2

3. Write JavaScript code as follows:

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

This function implements the use of Ajax technology to asynchronously load different web page content. When the button is clicked, the function will request the corresponding web page content, and then Update the content of the container to complete the effect of web page display.

Summary:

The above are three methods for realizing one page to present two different web content at the same time. This function can be achieved using iframe tags, JavaScript and Ajax technology. Which method to use needs to be chosen based on the actual situation. But no matter which method is used, the page needs to be laid out, positioned and styled to achieve the final presentation effect.

The above is the detailed content of How to write two web pages in one page in html. For more information, please follow other related articles on the PHP Chinese website!