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

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

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

1. iframe 태그 사용

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

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

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

2. JavaScript 사용

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

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

 
 
网页1
 
网页2
 
 
 
  
 
  
 
 

위 코드에서는 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에서 다음과 같이 컨테이너를 만듭니다.

2. 다음과 같이 토글 버튼을 정의합니다.

 
网页1
 
网页2
 

3. 다음과 같이 JavaScript 코드를 작성합니다.

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

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

요약:

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

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