Ajax 动态导航

Question

大家好，新年快乐：）

我不是 Ajax 的老大，我有一个小问题我无法解决。

我有一个包含 ajax 动态导航的页面，我有多个可以加载的 php 文件。

这是我在此页面中的导航

<section id="sub-nav">
    <div class="container-fluid">
        <ul>
            <li><a href="#" class="little-button" id="ajax-media">Media</a></li>
            <li><a href="#" class="little-button" id="ajax-business">Business</a></li>
            <li><a href="#" class="little-button" id="ajax-events">Events</a></li>
            <li><a href="#" class="little-button" id="ajax-music-business">Music Business</a></li>
            <li><a href="#" class="little-button" id="ajax-institutions">Institutions</a></li>
        </ul>
    </div>
</section>

每个按钮都像这样调用一个页面

$('#ajax-media').click(function(){
    event.preventDefault();
    $('#solution-wrapper').fadeOut('slow', function(){
      $('#solution-wrapper').load('../solution-media.php', function(){
        $(this).fadeIn('slow');
      });
    });
  });

我想在更改内容时重写 url，并且我想在浏览器中解析 url 时直接访问内容。

你们能否帮助我开始一个完美的新年，而我的代码中没有太多问题？ 我该怎么做这些事情？ 非常感谢:)

Answer 1

新年快乐

当你说重写 url 你想要什么样的格式？例子：你想让它说http://example.com/solution-media.php吗？

使用 #so example.com/index.php#media 最简单，其中 index.php 是容器网站。

如果您愿意，您可以在服务器端重写 url 以摆脱 index.php，然后您将获得 /media（使用内置于任何现代事物中的 html5 历史 API）

#示例如下

$('#ajax-media').click(function(){
    event.preventDefault();
    $('#solution-wrapper').fadeOut('slow', function(){
      $('#solution-wrapper').load('../solution-media.php', function(){

   $(this).fadeIn('slow');
   window.location.hash = 'media'; // This is the line that gives you the #
      });
    });
  });

让我知道这是否有意义

如果您希望能够粘贴 url 并加载该部分，这里有一个关于如何完成的粗略想法（在我的脑海中）

$(document).ready(function() {
var section = window.location.hash;

if (section) {
$('#ajax-'+section).trigger('click')
}

});