Пользовательское меню профиля пользователя и изменение содержимого на основе щелчка

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

Вы писали: «... нажмите, а затем страница изменить содержание ...», так что я предполагаю, что вы хотите, чтобы браузер, чтобы перезагрузить страницу, а не просто обновить DOM с помощью JavaScript. Пожалуйста, извините меня, если я неправильно понял ваш вопрос.

Как я обычно справляюсь с этим, назначая переменную 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, которые описывают то, что вы хотите, чтобы ваша целевая страница отображалась при ее загрузке.