Question

我一直在尝试使用jQuery设置网站的新方法，以便在点击链接时动态获取内容。这是jQuery代码：

$(document).ready(function() {

 var content_loader = $('#content-loader');

 $('#nav ul li a').click(function () {
  $(this).closest('ul').find('li.active').removeClass('active');
  $(this).parent().addClass('active');
  content_loader.load('content/' + $(this).attr('data-name') + '.html'); 
  });

 content_loader.load('content/home.html');

});

我一直这样做，因为我的网站背景中有一首歌我想一直播放，而不是每次点击一个链接都重新开始。

除了我遇到的两个问题外，整件事情都很好。

假设我点击了“联系我们”链接。我现在会在网址的末尾看到#contactus。如果我然后刷新页面，我会再次看到我的主页内容。
如果我尝试将某人链接到我的联系我们页面，则会出现同样的问题。

我想知道jQuery是否能以某种方式找出url中＃符号后面的内容。在这种情况下，我可以更改我的jQuery代码的最后一行，以便一直加载而不是主数据。

Answer 1

window.location.hash将包含哈希值后的值（如果有的话）。 （这是当前网址中有一个哈希，例如当前页面，在浏览器的地址栏中。）

否则，如果您正在从href读取链接，则需要使用indexOf('#')并进行一些解析。

Answer 2

感谢您的回答。这就是我现在的做法：

$(document).ready(function() {

    var content_loader = $('#content-loader');

    $('#nav ul li a').click(function () {
        $(this).closest('ul').find('li.active').removeClass('active');
        $(this).parent().addClass('active');
        content_loader.load('content/' + $(this).attr('href').slice(1) + '.html');  
        });

    var initial = 'home';
    if (window.location.hash) {
        initial = window.location.hash.slice(1);
        }

    $('#nav').find('a[href="#' + initial + '"]').parent('li').addClass('active');
    content_loader.load('content/' + initial + '.html');

    });

如何在jQuery中引用井号（＃）？

2 个答案: