0

我一直在尝试创建一个函数，我可以通过鼠标单击调用该函数来使用 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);
});
});
4

2 回答 2

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

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

于 2013-08-06T05:42:17.680 回答
0

请记住，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);
        });
    });
});

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

于 2013-08-06T06:05:11.253 回答