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

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 に答える