HTML로 한 페이지에 두 개의 웹 페이지를 작성하는 방법

하나의 HTML 페이지에 두 개의 웹 페이지를 작성하는 방법

웹 페이지를 만들 때 한 페이지가 두 개의 서로 다른 웹 페이지의 콘텐츠를 동시에 표시해야 하는 상황에 자주 직면합니다. 이때 우리는 한 페이지가 두 개의 웹 페이지를 표시하는 효과를 얻기 위해 몇 가지 기술을 사용할 수 있습니다. 두 개의 서로 다른 웹 콘텐츠를 하나의 HTML 페이지에 동시에 표시하는 방법을 소개하겠습니다.

1. iframe 태그 사용

iframe 태그는 HTML 페이지에 다른 HTML 페이지를 삽입하는 태그로, 두 가지 다른 웹 콘텐츠를 동시에 한 페이지에 표시할 수 있습니다.

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

그 중 src 속성은 내장된 웹페이지 주소를 지정하는데 사용됩니다.

CSS 스타일을 통해 iframe 태그의 위치와 크기를 지정하여 두 웹 페이지의 콘텐츠를 동일한 페이지에 렌더링할 수 있습니다.

2. JavaScript 사용

한 페이지와 두 개의 웹 페이지를 구현하는 또 다른 방법은 JavaScript를 사용하는 것입니다. JavaScript를 사용하면 HTML 페이지에서 다양한 웹 페이지 콘텐츠를 전환할 수 있으므로 한 페이지에 여러 웹 페이지를 표시하는 효과를 얻을 수 있습니다.

jQuery와 같은 JavaScript 라이브러리를 사용하여 웹 페이지를 동적으로 로드할 수 있습니다. 예:

<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를 사용하여 컨테이너를 설정하고 탭 및 탭 콘텐츠 클래스를 사용하여 스위치 버튼을 나타냅니다. 그리고 내용은 각각. 웹 페이지 전환 효과를 얻으려면 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 코드에서는 .tab 클래스에 .click() 메서드를 적용하여 스위치 버튼을 클릭할 때 이 메서드가 트리거되도록 했습니다. 전환할 콘텐츠를 추가한 후 현재 버튼을 추가합니다. 선택한 버튼과 콘텐츠는 "활성"으로 표시되고 나머지 버튼과 콘텐츠는 표시되지 않습니다.

3. Ajax 기술 사용

여러 웹 페이지를 동시에 표시하는 또 다른 방법은 Ajax 기술을 사용하는 것입니다. Ajax 기술을 사용하면 현재 페이지를 새로 고치지 않고도 비동기적으로 데이터를 얻고 웹 페이지 콘텐츠를 업데이트할 수 있습니다. Ajax 기술을 사용하면 한 페이지에 여러 웹 페이지를 동시에 표시하는 효과를 얻을 수 있습니다.

구체적인 단계는 다음과 같습니다.

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 기술을 사용하여 다양한 웹 페이지 콘텐츠를 비동기적으로 로드합니다. 버튼을 클릭하면 이 기능이 해당 웹 페이지 콘텐츠를 요청한 다음 컨테이너 콘텐츠를 업데이트하여 웹 페이지 표시 효과를 완성합니다.

요약:

위는 한 페이지를 구현하여 두 개의 서로 다른 웹 콘텐츠를 동시에 표시하는 세 가지 방법입니다. 이 기능은 iframe 태그, JavaScript 및 Ajax 기술을 사용하여 구현할 수 있습니다. 어떤 방법을 사용할지는 실제 상황에 따라 선택해야 합니다. 그러나 어떤 방법을 사용하든 최종 프레젠테이션 효과를 얻으려면 페이지의 레이아웃, 위치 및 스타일을 지정해야 합니다.

위 내용은 HTML로 한 페이지에 두 개의 웹 페이지를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!