在上述代碼中，我們使用CSS設(shè)置了一個(gè)容器，并且使用tab和tab-content類分別表示切換按鈕和內(nèi)容。為了實(shí)現(xiàn)網(wǎng)頁(yè)切換的效果，我們需要通過(guò)JavaScript代碼監(jiān)聽(tīng)切換按鈕的點(diǎn)擊事件，從而實(shí)現(xiàn)不同內(nèi)容的顯示和隱藏。具體代碼如下：

$(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代碼中，我們將.click()方法應(yīng)用于.tab類，這樣在點(diǎn)擊任何一個(gè)切換按鈕時(shí)都會(huì)觸發(fā)該方法，首先獲取要切換的內(nèi)容的ID，然后將當(dāng)前選中的按鈕和內(nèi)容標(biāo)記為“active”，其余按鈕和內(nèi)容都不予展示。

三、使用Ajax技術(shù)

另外一種實(shí)現(xiàn)多個(gè)網(wǎng)頁(yè)同時(shí)展示的方法是使用Ajax技術(shù)。Ajax技術(shù)可以使得我們?cè)诓恍枰⑿庐?dāng)前頁(yè)面的情況下，異步獲取數(shù)據(jù)并更新網(wǎng)頁(yè)內(nèi)容。我們可以使用Ajax技術(shù)來(lái)實(shí)現(xiàn)一個(gè)頁(yè)面同時(shí)展示多個(gè)網(wǎng)頁(yè)的效果。

具體操作步驟如下：

1.在HTML中創(chuàng)建容器，如下所示：

2.定義切換按鈕，如下所示：

  
網(wǎng)頁(yè)1
  
網(wǎng)頁(yè)2

3.編寫(xiě)JavaScript代碼，如下所示：

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

該函數(shù)實(shí)現(xiàn)了使用Ajax技術(shù)異步加載不同的網(wǎng)頁(yè)內(nèi)容，當(dāng)按鈕被點(diǎn)擊時(shí)，該函數(shù)會(huì)請(qǐng)求相應(yīng)的網(wǎng)頁(yè)內(nèi)容，然后更新容器的內(nèi)容，從而完成網(wǎng)頁(yè)展示的效果。

關(guān)于“html一個(gè)頁(yè)面兩個(gè)網(wǎng)頁(yè)如何寫(xiě)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。