javascript - 页面在div中加载，不想为主页创建新页面

Question

我使用jQuery在div内加载新页面，但我不想仅针对主页上该div中的内容创建页面。我的脚本如下：

<script type="text/javascript">
    $(document).ready(function() {
        $(".navigation").on("click", function(){  
            $("#content").load($(this).attr("page"));
            return false;
        });
    });
</script>

一切都很好

<div id="content"></div>

但我的导航部分的结构是选择HOME。

<nav id="menu">
    <a href="" title="" page="home.php" class="navigation">Home</a>
    <a href="" title="" page="about.php" class="navigation">About</a>
</nav>

那么，有没有办法让脚本加载我在原始页面中“ content” div中所包含的内容，或者使“ HOME”按钮成为指向索引页面的实际链接会更容易？

如果我将其更改为，一切仍然有效

<a href="index.php" title="">Home</a>

我只是不喜欢整个页面的加载，而不是单击网站上的其他按钮而仅加载内容。

Answer 1

从jQuery docs：


  .load（）方法与$ .get（）不同，它允许我们指定
  要插入的远程文档。这是通过特殊的
  url参数的语法。如果一个或多个空格字符是
  包含在字符串中，字符串中第一个之后的部分
  假定空格是确定内容的jQuery选择器
  被加载。
  
  我们可以修改上面的示例以仅使用文档的一部分
  这是获取的：
  
  $（“ #result”）.load（“ ajax / test.html #container”）;


因此，您可以执行以下操作：

<script type="text/javascript">
    $(document).ready(function() {
        $(".navigation").on("click", function(){  
            var page = $(this).data("page");
            if(page == "index.php"){                    
                 //Load only element with id content from index.php
                 $("#content").load(page + " #content"); 
            } else{
                $("#content").load(page);
            }
            return false;
        });
    });
</script>

<nav id="menu">
    <a href="" title="" data-page="index.php" class="navigation">Home</a>
    <a href="" title="" data-page="about.php" class="navigation">About</a>
</nav>

PS。您不应使用adeneo指出的无效属性，因此我将您的属性更改为数据属性。