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

标签 javascript php jquery html

我使用 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>

有没有办法让脚本加载原始页面“内容”div 中的所有内容,或者让“主页”按钮成为索引页面的实际链接会更容易?

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

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

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

最佳答案

来自jQuery docs :

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

We could modify the example above to use only part of the document that is fetched:

$( "#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指出的那样,您不应该使用无效属性,因此我将您的属性更改为数据属性。

关于javascript - 页面加载在div中,不想为主页创建新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27643091/

相关文章:

Javascript 在滚动页面的特定百分比上开始和结束

javascript - 不带引号的 JSON.stringify 键

javascript - jquery:通过指定数据属性删除元素

javascript - 悬停时的文本未正确居中 CSS

php - 更改数据库中已保存的信息以使用另一个 php 更新

php - Mysql创建日期(记录更新时不更新)

php - 如果命令在 mac 终端内运行,如何让 shell_exec 表现得像命令一样?

jquery - 如何在多个 div 中依次淡入淡出?

javascript - 使用 Jquery 从对象属性填充单选按钮

javascript - javascript 中的 "Done"函数