ユーザープロファイルのサイドメニューとクリックに基づいてコンテンツを変更する

Question

ユーザーがクリックしてからページを変更できるhtmlメニューが必要です。

<li><a href="" data-box="index"><i class="fa fa-user"></i> My Profile</a></li> 
<li><a href="" data-box="account"><i class="fa fa-edit"></i> Edit Profile</a></li> 
<div class="box index"> 
    @include("partials.profile_index") 
    </div> 
    <div class="box account"> 
    @include("partials.profile_account") 
    </div> 
<script> 

$(document).ready(function(){ 

$('a').click(function(ev){ 
    ev.preventDefault(); 

    // hide everything 
    $('.box').not(
     // except the corresponding box 
     $('.box.'+$(this).data('box')+':hidden').fadeIn() 
    ).fadeOut(); 
}); 

}); 


</script> 

Answer 1

あなたは以下のようにすることができます。デモを確認する - Fiddle Demo。

$(document).ready(function(){ 

    $('a').click(function(ev){ 
     ev.preventDefault(); 

     // hide everything 
     var $thisBox = $('.box.' + $(this).data('box')); 
     $('.box').not($thisBox).fadeOut(); 
     if ($thisBox.is(':hidden')) { 
      $thisBox.fadeIn(); 
     } 
    }); 

}); 

Answer 2

あなたのコードを少し整理し、説明のためにいくつかのコメントを追加しました。これはあなたのために機能し、将来のデバッグにも役立ちます。最後に、ボックスのアニメーションが完成した後に受信ボックスアニメーションが発生することを確認しました。 See this fiddle

$(document).ready(function(){ 

    // hide all boxes by default. 
    $('.box').hide(); 

    // when someone clicks a link, process hiding/showing the correct box 
    $('a').click(function(ev){ 

    // stop the default action for the click event. 
    ev.preventDefault(); 

    // assign a friendly variable for the current box 
    var currentBox = $(this).attr("data-box"); 

    // hide everything except for the box we want to show 
    $('.box').not('.' + currentBox).fadeOut('slow', function() { 

     // after the animation is complete fade in the box we want to show. 
     $('.box.' + currentBox).fadeIn('slow'); 

    }); 

    }); 

}); 

Answer 3

あなたは書いた：「...をクリックし、ページのコンテンツを変更...」私はあなたがブラウザがページをリロードし、単にJavaScriptでDOMを更新しないようにしたいと仮定するつもりです。私があなたの質問を誤解した場合は、私を許してください。

どのようにこれを処理するかは、リンクに「action」という名前のURL変数を割り当てることです。そのようにしてページをリロードすると、表示するコンテンツがわかります。

コードは、使用しているサーバー側の言語によって異なる場合があります。

<ul> 
    <li><a href="index.cfm?action=myProfile" data-box="index"><i class="fa fa-user"></i> My Profile</a></li> 
    <li><a href="index.cfm?action=editProfile" data-box="account"><i class="fa fa-edit"></i> Edit Profile</a></li> 
</ul> 

次に、あなたはいくつかを提供する：ここで

は、あなたのリンクがどのように見えるかの例だなど、私はCFMLで説明しますが、ロジックは関係なく、あなたがPHPを使用しているかどうかを同じにする必要がありますindex.cfmページのサーバー側ロジックのタイプは、次のようになります。

<!--- does the user want to view his/her profile? ---> 
<cfif action IS "myProfile"> 

    <div class="box index"> 
     @include("partials.profile_index") 
    </div> 

</cfif> 

<!--- does the user want to edit his/her profile? ---> 
<cfif action IS "editProfile"> 

    <div class="box index"> 
     @include("partials.profile_account") 
    </div> 

</cfif> 

このソリューションでは、JavaScriptは必要ありません。目的のページがロードされるときに表示させたいものを記述するURL変数を持つ通常のリンクを作成するだけです。