javascript - 将一个页面的 div 内容替换为另一个页面的 div 内容

标签 javascript jquery css

我有一个带有导航链接的页面。当用户单击页面 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>

最佳答案

如果页面与包含脚本的页面来自同一域并且包含有效的 (x)html,那么它应该可以工作。

注意:Ajax 不能在文件系统中运行。它需要所有文件都来自网络服务器。

我个人会做

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

关于javascript - 将一个页面的 div 内容替换为另一个页面的 div 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36983835/

相关文章:

javascript - 如何避免在 map 迭代 block 中创建多个新函数

javascript - 提高 else-if 链的性能

javascript - React-router 会影响页面加载时间吗?

css - 在 iPad 上背景不会完全穿过

javascript - 即时更改所见即所得的文本方向(ltr 和 rtl)

javascript - 如何阻止 <a> 标签跳转到 href 属性指定的目标?

javascript - 在表单中引入元素

javascript - $ ("<option>", { value : "thing1", text: "thing2"})); 的 JavaScript 等价物是什么

html - HTML 中 h1 标签的边距将其容器向下推

html - 在 h1 中添加不同大小的标签