jQuery深度链接,从其他页面问题中的div加载内容

jQuery深度链接,从其他页面问题中的div加载内容,jquery,html,loading,equal-heights,Jquery,Html,Loading,Equal Heights,令人钦佩的是,我对这一点还不熟悉,但我读过几本书,在网上搜索过,却找不到我需要的东西。因此,任何援助都是一种祝福 我可以设置一个函数,单击导航链接后,它会将相应页面上的“#content”div加载到当前页面上的“#content”div中。当我尝试用地址插件实现深度链接时,问题出现了。我似乎不知道如何让它只从页面加载“#content”div 你可以在这里看到它:www.theeastcoastsclassic.com/index1.html 底部导航仍具有原始的加载功能,顶部使用深度链接功能

令人钦佩的是,我对这一点还不熟悉,但我读过几本书,在网上搜索过,却找不到我需要的东西。因此,任何援助都是一种祝福

我可以设置一个函数,单击导航链接后,它会将相应页面上的“#content”div加载到当前页面上的“#content”div中。当我尝试用地址插件实现深度链接时,问题出现了。我似乎不知道如何让它只从页面加载“#content”div

你可以在这里看到它:www.theeastcoastsclassic.com/index1.html 底部导航仍具有原始的加载功能,顶部使用深度链接功能

这是我的.js文件:

// Deep Linking

    function loadURL(url) {
            console.log("loadURL: " + url);
            $("#content").load(url);
    }

    $.address.init(function(event) { 
            console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
            }).change(function(event) {
            $("#content").load($('[rel=address:' + event.value + ']').attr('href'));
            console.log("change");
    })

    $('ul#topNav a').live('click', function(e){
            $.scrollTo('#content', 'slow');
            $("#content").hide();
            loadURL($(this).attr('href').fadeIn("6000"));
            e.preventDefault();
    });

// Top Nav Hijax

/*  $("ul#topNav a").live("click",function(e) {
        $.scrollTo('#content', 'slow');

        var url = $(this).attr("href") + " #content";   
        $("#content").hide().load(url).fadeIn("6000");
        e.preventDefault();
    }); */

// Bot Nav Hijax

    $("ul.bNav a").live("click",function(e) {
        $.scrollTo('#content', 'slow');

        var url = $(this).attr("href") + " #content";   
        $("#content").hide().load(url).fadeIn("6000");
        e.preventDefault();
    });

//Equal Height Columns

    $(document).ready(function() {
        $("div .col3").equalHeights();
                               });
这是简化的HTML:

<ul id="topNav">
            <li>
            <a href="index.html" title="index" rel="address:/index"> Home </a>
            </li>
            <li>
            <a href="schedule.html" title="schedule" rel="address:/schedule"> Schedule </a>
            </li>
            <li>
            <a href="lodging.html" title="lodging" rel="address:/lodging"> Lodging </a>
            </li>
            <li>
            <a href="sponsors.html" title="sponsors" rel="address:/sponsors"> Sponsors </a>
            </li>
            <li>
            <a href="directions.html" title="directions" rel="address:/directions"> Directions </a>
            </li>
            <li>
            <a href="contact.html" title="contact" rel="address:/contact"> Contact </a>
            </li>
        </ul>



 <div id="content" class="clearfix">
</div>
另外,如果你有关于equalHeights列的任何提示,请让我知道,这个插件似乎非常简单,但在每个浏览器上的显示方式不同,我得到了很多滚动条

  • equalHeights插件与您的问题无关-如果您遇到此插件的bug,请另提一个问题
  • 您应该阅读插件文档-您需要添加一个
    change()
    函数,因此如果地址更改,将执行以下操作:

    $.address.change(函数(事件){ //您的加载逻辑在这里 });