爲選項卡式內容添加不錯的滑動效果

Question

我正在構建選項卡式內容區域的過程中，現在需要的是，當打開選項卡時，它需要一個很好的滑動效果嗎？

$('#feature-tabs li').on('click', 'a', function(e) { 
    e.preventDefault(); 
    var clicked = $(this); 
    var tab_id = clicked.attr('data-tab'); 

    if(clicked.parent().hasClass('active-tab')) { 
     clicked.parent().removeClass('active-tab'); 
     clicked.children('img').toggleClass('hide-logo'); 
     $('#' + tab_id).removeClass('active-feature-tab-item'); 

    } else { 
     $('.feature-tabs li').removeClass('active-tab'); 
     $('.feature-tab-item').removeClass('active-feature-tab-item'); 
     $('.feature-tabs a img:nth-child(1)').removeClass('hide-logo'); 
     $('.feature-tabs a img:nth-child(2)').addClass('hide-logo'); 

     $('.feature-tabs a[data-tab=' + tab_id + ']') 
     .parent().addClass('active-tab'); 

     $('.feature-tabs li a[data-tab=' + tab_id + '] img').toggleClass('hide-logo'); 

     $('#' + tab_id).addClass('active-feature-tab-item'); 
    } 
}); 

下面是HTML：

<ul id="feature-tabs" class="feature-tabs"> 

    <li> 
     <a href="#" data-tab="tab-1"> 
      <img src="<?php echo $this->getThemePath(); ?>/images/logos/llanrhidian-tab-logo.png" alt=""> 
      <img src="<?php echo $this->getThemePath(); ?>/images/logos/llanrhidian-tab-logo-mono.png" alt="" class="hide-logo"> 
     </a> 
    </li> 
    <li> 
     <a href="#" data-tab="tab-2"> 
      <img src="<?php echo $this->getThemePath(); ?>/images/logos/greenmeadow-tab-logo.png" alt=""> 
      <img src="<?php echo $this->getThemePath(); ?>/images/logos/greenmeadow-tab-logo-mono.png" alt="" class="hide-logo"> 
     </a> 
    </li> 
    <li> 
     <a href="#" data-tab="tab-3"> 
      <img src="<?php echo $this->getThemePath(); ?>/images/logos/gower-events-tab-logo.png" alt=""> 
      <img src="<?php echo $this->getThemePath(); ?>/images/logos/gower-events-tab-logo-mono.png" alt="" class="hide-logo"> 
     </a> 
    </li> 
    <li> 
     <a href="#" data-tab="tab-4"> 
      <img src="<?php echo $this->getThemePath(); ?>/images/logos/purplebadger-tab-logo.png" alt=""> 
      <img src="<?php echo $this->getThemePath(); ?>/images/logos/purplebadger-tab-logo-mono.png" alt="" class="hide-logo"> 
     </a> 
    </li> 

</ul> 

<div class="feature-tab-content"> 

    <div id="tab-1" class="feature-tab-item"> 
     <h2>Title 1</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, perferendis velit! Voluptatum veritatis tenetur quibusdam molestiae possimus incidunt, nesciunt ab!</p> 
    </div> 

    <div id="tab-2" class="feature-tab-item"> 
     <h2>Title 2</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, perferendis velit! Voluptatum veritatis tenetur quibusdam molestiae possimus incidunt, nesciunt ab!</p> 
    </div> 

    <div id="tab-3" class="feature-tab-item"> 
     <h2>Title 3</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, perferendis velit! Voluptatum veritatis tenetur quibusdam molestiae possimus incidunt, nesciunt ab!</p> 
    </div> 

    <div id="tab-4" class="feature-tab-item"> 
     <h2>Title 4</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, perferendis velit! Voluptatum veritatis tenetur quibusdam molestiae possimus incidunt, nesciunt ab!</p> 
    </div> 

</div> 

有沒有什麼辦法可以改善我的javascript？而且我還想爲選項卡式內容添加滑動效果。

這裏是我的更新codepen

Answer 1

您可以用CSS3添加幻燈片效果。我已經修改了你的CSS和HTML 這裏是SCSS：

.feature-tab-content{ 
    position: relative; 
    padding: 0 40px; 
} 
.feature-tab-item { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    width: 100%; 
    div{ 
     padding: 20px; 
    } 
    background:blue; 
    color:white; 
    max-height: 0; 
    padding:0; 
    overflow: hidden; 
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out; 
    &.active-feature-tab-item { 
     -webkit-transition: all 0.8s 0.5s ease-out; 
     -moz-transition: all 0.8s 0.5s ease-out; 
     transition: all 0.8s 0.5s ease-out; 
     max-height: 160px; 
    } 
} 

檢查這個環節全碼 - link：
希望它會幫助你。