頁面在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文檔 ：

與$ .get（）不同，.load（）方法允許我們指定要插入的遠程文檔的一部分。 這可以通過使用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指出的無效屬性，因此我將您的屬性更改為數據屬性。