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：
希望它能帮到你。

为选项卡式内容添加一个很好的滑动效果

1 个答案: