在 jQuery 地址插件书签页面上自动加载 div 内的内容

Posted

技术标签:

【中文标题】在 jQuery 地址插件书签页面上自动加载 div 内的内容【英文标题】:Automatically load content inside div on jQuery Address plugin bookmarked page 【发布时间】:2013-05-28 14:24:37 【问题描述】:

我正在使用 jquery.address 插件来更新浏览器的地址栏,同时通过 ajax 加载内容。一切正常,除了我不知道如何在用户尝试访问诸如“domain.com/about-us”之类的书签页面时自动将 event.value 或 event.path 加载到我用来加载内容的 DIV 中,在这种情况下页面会加载,但“关于我们”的内容不会加载到 DIV 中。我错过了什么?这是我的代码:

JS:

function loadURL(url) 
    $("#content").fadeOut(600, function() 
        $(this).load(url).fadeIn(800);  
    );


$.address.init(function(event) 

    $.ajax(
        url: event.value,
        success: function(data) $('#content').load(data); 
    );

).change(function(event) 

    $('a').click(function()
         loadURL($(this).attr('href'));
    );

);

html

<div id="menu">
        <ul>
            <li id="menu_about"><a href="about-us.html" rel="address:/about-us">About Us</a></li>
            <li id="menu_contact"><a href="contact.html" rel="address:/contact">Contact</a></li>
        </ul>
</div>

<div class="wrapper">

    <div id="content">

    </div>

</div>

.htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine on

  # Rewrite current-style URLs of the form 'index.html?url=x'.
  RewriteCond %REQUEST_FILENAME !-f
  RewriteCond %REQUEST_FILENAME !-d
  RewriteRule ^(.*)$ index.html?url=$1 [L,QSA]
</IfModule>

谢谢!

【问题讨论】:

【参考方案1】:

$.address.externalChange(function(event)) 是您正在寻找的。它会在页面加载时捕获路径。

【讨论】:

以上是关于在 jQuery 地址插件书签页面上自动加载 div 内的内容的主要内容,如果未能解决你的问题,请参考以下文章

Jquery Super box 自动加载

jQuery淡入网站/内容一旦加载?

jquery.imgpreload.min.js插件实现页面图片预加载

jquery.datatable插件如何不自动加载数据?

如何在书签调用之间存储对象?

fcode-页面九宫格自动锁屏jquery插件