用戶配置文件的側邊菜單和基於點擊更改內容

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變量。這樣當頁面重新加載時，我知道要顯示哪些內容。

根據您使用的服務器端語言，您的代碼可能會有所不同。我會CFML證明，但邏輯應該是一樣的，不管是否使用PHP等

這裏是你的鏈接可能外觀的示例：

<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> 

，那麼你會提供一些服務器端的邏輯是這樣的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變量創建正常鏈接，即描述您希望目標頁面在加載時顯示的內容。