如何通过JavaScript实现Tab标签页内容Slide Up滑入效果？

Let's walk through fixing your tab content slide-up effect. The main issues with your current code are incorrect animation direction in JavaScript and missing CSS positioning to enable the slide-up behavior.

Step 1: Update CSS for Positioning & Animation #

First, we need to adjust the CSS to set up the proper container and content positioning so we can animate the slide-up effect:

.container { display: flex; }
.purpleBackground { 
  align-self: flex-end; 
  background-color: #65308b; 
  opacity: 0.9; 
  width: 60%; 
  height: 80%; 
  bottom: 0px !important; 
  padding: 60px 40px; 
  border: 1px solid #fff; 
  position: relative; /* Make this a relative container for absolute content */
  overflow: hidden; /* Hide content outside the container bounds */
}
.whiteText { color: #fff; }
ul.tabs { margin: 0px; padding: 0px; }
ul.tabs li { 
  background: none; 
  color: #222; 
  display: block; 
  padding: 20px 15px; 
  cursor: pointer; 
  font-size: 17px; 
  border-width: 0px 0px 1px 0px; 
}
ul.tabs li.current { background: #65308b; color: #fff; }
.tab-content { 
  position: absolute; /* Position content absolutely inside the purple container */
  bottom: -100%; /* Start content below the visible area */
  left: 40px; /* Match parent's left padding */
  right: 40px; /* Match parent's right padding */
  color: #fff; 
  opacity: 0; /* Hide content initially */
}
.tab-content.current { 
  bottom: 60px; /* Position content at the top (matching parent's top padding) */
  opacity: 1; /* Make content visible */
}
.sectionBackground { 
  background: url("http://www.choicecare.ds- demo.co.uk/wp-content/uploads/2017/12/placeholder.png"); 
  background-size:cover; 
  display: flex; 
  height: 450px; 
}

Step 2: Corrected JavaScript for Slide-Up Animation #

Next, we'll rewrite the JavaScript to handle the animation flow correctly—hiding the current tab content first, then sliding the new content up into view:

$(document).ready(function() {
  // Initialize the first tab to be visible properly
  const $initialTab = $('.tab-content.current');
  $initialTab.css({ bottom: '60px', opacity: 1 });

  $('ul.tabs li').click(function() {
    const $clickedTab = $(this);
    const targetTabId = $clickedTab.attr('data-tab');
    const $targetTab = $(`#${targetTabId}`);

    // Exit if clicking the already active tab
    if ($clickedTab.hasClass('current')) return;

    // Remove active class from all tabs and mark clicked tab as active
    $('ul.tabs li').removeClass('current');
    $clickedTab.addClass('current');

    // Animate the current active tab out of view (slide down)
    $('.tab-content.current').animate({
      bottom: '-100%',
      opacity: 0
    }, 500, function() {
      // Remove active class after animation completes
      $(this).removeClass('current');

      // Prepare target tab (position it below the container)
      $targetTab.css({ bottom: '-100%', opacity: 0 });

      // Animate target tab up into view
      $targetTab.animate({
        bottom: '60px',
        opacity: 1
      }, 500, function() {
        // Mark target tab as active after animation
        $targetTab.addClass('current');
      });
    });
  });
});

Key Changes Explained #

1. CSS Adjustments:

   • Added position: relative and overflow: hidden to .purpleBackground to contain the absolute-positioned tab content.
   • Positioned .tab-content absolutely so we can animate its vertical position.
   • Set initial state of non-active tabs to be below the container with opacity 0.

2. JavaScript Adjustments:

   • Added a check to avoid redundant animations when clicking the same tab twice.
   • Animated the current tab content down and out of view before showing the new one for a smooth transition.
   • Used jQuery's animate() function to smoothly transition the bottom position and opacity of the tab content, creating the slide-up effect.
   • Properly toggled the current class after animations complete to maintain state.

Now when you click a tab, the new content will slide up from the bottom into view, and the old content will slide down out of sight.

内容的提问来源于stack exchange，提问作者liam geary