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>

那么有没有办法让脚本加载我所拥有的内容＆＃34;内容＆＃34; div在我的原始页面中，或者只是更容易制作＆＃34; HOME＆＃34;按钮是索引页面的实际链接？

如果我将其更改为

，一切仍然有效

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

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

Answer 1

来自jQuery docs：

与$ .get（）不同，.load（）方法允许我们指定一部分   要插入的远程文档。这是通过特殊的方式实现的   url参数的语法。如果有一个或多个空格字符   包含在字符串中，第一个字符串后面的字符串部分   假设space是一个确定内容的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指出的无效属性，因此我将您的属性更改为数据属性。

页面加载div，不想为主页创建新页面

1 个答案: