jQuery链接和URL哈希

Question

我是jQuery的新手，我真的不知道自己在做什么。 我需要协助。

我正在创建一个Web应用程序。 它有一个页眉和页脚，我想保留在每个页面上，因此我决定使用jQuery将页面加载到主要内容div中，因此每次单击链接时，都不会重新加载整个页面。

这是我用来实现此目的的方法：

<script>
    $(function() {
        $("a.ajax-link").on("click", function(e) {
            e.preventDefault();
            $("#main_content").fadeOut('fast');
            $("#main_content").load(this.href);
            $('html, body').animate({ scrollTop: 0 }, 0);
            $("#main_content").fadeIn('fast');
        });
    });
  </script>

并且每个链接：

<a class="ajax-link" id="add" href="add.php"><span class="glyphicon glyphicon-plus-sign" style="margin-top:4px;"></span><div>add</div></a>

除页面地址外，这非常有用。 我的应用程序使用PHP，并且我需要能够将PHP标头添加到“ index.php＃about”之类的页面，该页面将加载index.php页面并在#main_content div中显示about.php。

我尝试了这个：

<script type="text/javascript">
    $(document).ready(function(){
       var id = window.location.hash;
       $(id).trigger('click');
    })
  </script>

我可以看到选中链接的位置（它周围的框），但实际上并没有单击它。 我不知道为什么。

预先感谢您的任何帮助！

Answer 1

我认为您可以获取哈希值，添加php扩展名并进行ajax调用。

<script>
    $(function() {
        $("a.ajax-link").on("click", function(e) {
            e.preventDefault();

            // Get the hash from the URL and append .php extension
            // index.php#about ==> 'about.php'

            var page = window.location.hash + ".php";

            //Make an ajax call using the page variable.

            $("#main_content").fadeOut('fast');
            $("#main_content").load(page);
            $('html, body').animate({ scrollTop: 0 }, 0);
            $("#main_content").fadeIn('fast');
        });
    });
</script>