javascript - 用户个人资料侧菜单并根据点击更改内容

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

我稍微清理了你的代码并添加了一些注释以进行解释。这应该对您有用，并且也有助于将来的调试。最后，我还确保传入框动画在传出框完成动画之后发生。 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');

    }); 

  });

});