Question

我一直在尝试创建一个函数，我可以通过鼠标点击调用它来使用jQuery加载页面的一部分。我已经设法让函数内部的代码在不使用函数的情况下工作，但是当我尝试使用函数实现它时，应该加载的页面转到新页面而不是“问候语”部分“是。在这里查看：http://mvcsf.com/portfolios/（点击你的个人资料，你会看到我的意思）

HTML：

<div id="bottomContent">
            <div id="side-bar"> 
                <ul class="side-nav">
                  <li class="divider"></li>
                  <li class="menuOption active" id="home"><a href="#">Introduction</a></li>
                  <li class="divider"></li>
                  <li class="menuOption" id="changeDetails"><a href="membersProfileChange.php">Your Profile</a></li>
                  <li class="divider"></li>
                  <li class="menuOption" id="signedUpEvents"><a href="#">Registered Events</a></li>
                  <li class="divider"></li>
                  <li class="menuOption" id="upcomingEvents"><a href="#">Upcoming Events</a></li>
                  <li class="divider"></li>
                </ul>   
           </div>
           <div id="bottomMainContent">
                <h1> Greetings!</h1>
           </div>
       </div>

jQuery :(根据Tieson和Ninja的建议编辑）

$(document).ready(function(){
    $('.menuOption').click(function(e) {
    $('.menuOption').removeClass('active');
    $(this).addClass('active');     
    e.preventDefault();
    linkURL = $(this).attr('href');
     $("#bottomMainContent").load(linkURL);
     $("#content").animate({
        height:$("#bottomContent").height() + 300
    },600);
});
});

Answer 1

$('#changeDetails').click(function(e) {
    e.preventDefault();
    linkURL = $(this).attr('href');
    returnAjaxPage(linkURL);
});

这应该可以解决您的问题。这里的问题是默认情况下锚标记<a></a>会将您重定向到您在href属性中指定的网址。如果您不希望这样做，则需要阻止该默认操作。

Answer 2

请记住，Ajax方法没有阻塞，因此您可能希望在.load()调用的回调中移动动画;像这样的东西：

$(function(){
    $('.menuOption').on('click', function(e) {    
        e.preventDefault();

        $('.menuOption').removeClass('active');
        $(this).addClass('active'); 
        linkURL = $(this).attr('href');

         $("#bottomMainContent").load(linkURL + ' #your-filter-fragment', function(response, status, jqxhr){
            $("#content").animate({
                height:$("#bottomContent").height() + 300
            },600);
        });
    });
});

根据需要，回调函数的参数可用于执行一些错误处理。

创建一个ajax函数来加载页面jQuery的各个部分

2 个答案: