將一個頁面的div內容替換為另一頁面的div內容

Question

我在導航欄中有一個帶有鏈接的頁面。 當用戶單擊頁面B時，我想將頁面B中的內容加載到頁面A的div＃main-text中，但似乎無法正常工作。 我對js還是很陌生，所以請放輕松。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(function(){
    $("#nav_a").on("click", function(){
        $("#main_text").load("pageA.html");  
    });
    $("#nav_b").on("click", function(){
        $("#main_text").load("pageB.html");  
    });    
});
</head>
</script>

<body>
<div class="nav">
    <ul>
        <li><a id="nav_a" href="#">Page A</a></li>
        <li><a id="nav_b" href="#">Page B</a></li>
    </ul>
</div>
<div id="main_text">Page A</div>
</body>
</html>

Answer 1

如果頁面與包含腳本的頁面來自同一域，並且包含有效的（x）html，則它應該可以工作。

注意： Ajax在文件系統中不起作用。 它需要所有文件都來自Web服務器。

我會親自做

$(".nav a").on("click", function(e){ 
  e.preventDefault(); // cancel the click
  $("#main_text").load("page"+this.id.split("_")[1].toUpperCase()+".html"); 
});

將一個頁面的div內容替換為另一頁面的div內容

問題描述

1 個解決方案

解決方案1
1 已采納 2016-05-02 13:50:41

將一個頁面的div內容替換為另一頁面的div內容

問題描述

1 個解決方案

解決方案1 1 已采納 2016-05-02 13:50:41

解決方案1
1 已采納 2016-05-02 13:50:41