Question

我正在尝试创建一个导航系统，其中有一组链接，单击时会将外部页面加载到div中。这是我到目前为止所做的，但它不起作用：

<div class="row">
    <a href="link1" class="loadPage"><div class="col-md-4"><div class="navActive">Link1</div></div></a>
    <a href="link2" class="loadPage"><div class="col-md-4"><div class="">Link2</div></div></a>
    <a href="link3" class="loadPage"><div class="col-md-4"><div class="">Link3</div></div></a>
</div>

$(document).ready(function() {
    $('.loadPage').click(function(e){
        e.preventDefault();
        var curActive = document.querySelectorAll(".navActive");
        for (i=0;i<curActive.length;i++)
            curActive[i] = curActive[i].className.replace( /(?:^|\s)navActive(?!\S)/g , '' );
        e.preventDefault();
        $('.targetLoad')
            .hide()
            .load(this.href), function() {
                $(this).fadeIn(500);
            });
        $(this + ' div div').addClass('navActive');
    });
});

Answer 1

您的代码中有几处错误：

.load(this.href*)*, function() {...);应为.load(this.href, function() {。您想指定一个完整的回调。不只是声明一个函数表达式，对吗？
this div div那是什么意思？您需要$(this).find('div > div')。

总结一下。

$(function() {
    $('.loadPage').click(function(e){
        var activeCls = 'navActive';
        e.preventDefault();
        $('.' + activeCls).removeClass(activeCls);
        $('.targetLoad')
            .hide()
            .load(this.href, function() {//there is no ')' after href
                $(this).fadeIn(500);
            });
        $(this).find('div > div').addClass(activeCls);
    });
});

工作演示http://jsfiddle.net/tarabyte/F4EL9/。忽略其他代码以模拟服务器响应。

Answer 2

考虑做这样的事情：

<a onclick="load_url('/my-page.html');">My page</a>

然后是jquery：

function load_url(url)
{
    $("#target_div").load(url);
}

如何通过将页面加载到div中来创建动态导航系统？

2 个答案: