Question

我正在尝试使用我的网站创建一些ajax，点击导航，页面将转到另一个页面。我正在阅读this tutorial，它有效！除了有一些我不喜欢的东西。我有几个问题..

在网址中，这很奇怪;如果我点击主页，它将转到example.tld/home#，但我想在后面有哈希。 example.tld/#home。如果我要转到联系页面，它将显示为/home#co ...不会显示整个单词。（联系）。我希望#contact在我更改页面时替换#home。另外，我如何在加载而不是#home的情况下登陆不同的页面？示例：点击example.tld/#contact，转到#contact页面。

假设我在#home，如果我再次点击#home链接，它会重新加载同一页面，如果我已经在该页面上，有没有办法阻止它？

还有一个问题......页面淡出淡出，它的效果很酷但是从角落里消失有点难看，有没有一种方法可以让内容滑入并在需要时滑出？我在加载另一个页面之前尝试slideUp()，它正是我想要的（它有效）但是当内容出现时我无法让它向下滑动。

我很抱歉这么多问题，过去2天我老老实实地试着得到我想要的东西，但我尝试做的却失败了！感谢任何回答我问题的人！

以下是我从tutorial修改的代码：

 // Check for hash value in URL  
    var hash = window.location.hash.substr(1);  
    var href = $('nav ul li a').each(function(){  
        var href = $(this).attr('href');  
        if(hash==href.substr(0,href.length-5)){  
            var toLoad = hash+'.html #main-content';  
            $('#content').load(toLoad)  
        }  
    });  

    $('nav ul li a').click(function(){  

    var toLoad = $(this).attr('href')+' #main-content';  
    $('#main-content').hide('fast',loadContent);  
    $('#load').remove();  
    $('#wrapper').append('<span id="load">LOADING...</span>');  
    $('#load').fadeIn('normal');  
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  
    function loadContent() {  
        $('#main-content').load(toLoad,'',showNewContent())  
    }  
    function showNewContent() {  
        $('#main-content').show('normal',hideLoader());  
    }  
    function hideLoader() {  
        $('#load').fadeOut('normal');  
    }  
    return false;  

    });

想想我应该重温一些正在重复的选择器吗？

此处还有 HTML：

<div id="main-content" class="home">

… content to be loaded

</div>

导航：

<nav>
        <ul>
          <li><a href="home">Home</a></li>
          <li><a href="about">About</a></li>
          <li><a href="contact">Contact</a></li>
        </ul>
      </nav>

我正在使用htaccess，因此我不必包含文件扩展名，但如果需要，则文件为.php

Answer 1

要将哈希值移回，您需要更改服务器实际为HTML文件提供服务的位置。目前，如果我理解正确，您的文件将作为/home投放，并且哈希值会添加到该文件中。您需要更改文件结构（或.htaccess）以允许将页面作为目录索引（/，可能index.html或index.php）进行访问。

顶部的代码块用于检查当前哈希并在首次加载时加载适当的内容，但是，它试图遍历不存在的元素！运行此代码时，不一定会加载DOM，并且在$('nav ul li a').each...中，它找不到任何链接。您可以通过将整个第一个代码块包装在jQuery的document-ready-event-helper中来解决这个问题！

$(function () {
    //In here, the DOM is loaded! Hurrah!
});

（见http://api.jquery.com/jQuery#jQuery3）

要防止重新加载当前页面，您需要在单击处理程序的开头进行简单检查。

的内容

var goingTo = $(this).attr('href');
goingTo = goingTo.substring(0, goingTo.length - 5);
if (window.location.hash.substring(1) === goingTo) return false;

要更改转场，您只需将fadeIn和fadeOut更改为slideDown和slideUp s！

希望这有帮助！

Answer 2

这可能会解决它：

$('nav ul li a').click(function(event){ 
    ...

    event.preventDefault();
    return false;
}

Ajax故障排除，需要一些帮助

2 个答案: