这样的tab效果如何实现

Question

做一个类似于淘宝淘抢购的效果

这个热卖榜单和后面的时间点是同层级的关系

试着写了下但是效果不是太好，忘各位大神指教

Answer 1

可以自己通过js实现；或者通过插件，我推荐你一个插件superslide.js

Answer 2

基本的tab标签页组件，大部分框架都有的。
自己写的话其实利用js修改display控制不同内容块的展示与否就行了

Answer 3

https://github.com/sobrown/ht... 这里有我一个简单的tab切换功能。希望对你有帮助。

Answer 4

简单一点的就是，利用上面的tab,传递参数，比如

function tabs(index){
    switch(index){
        case a:
        $('.a').hide()
        case b:
        .....
    }
}

高级一点的就是封装一个类，里面存放你的方法，在元素标签里面可以存放data-属性，传入值，适用性更广一点
不过目前大多数的UI框架都会有这样的组件，不用自己写

Answer 5

HTML

 <ul class="swiperTab">
        <li class="active"> <span>14:00</span> </li>
        <li> <span>15:00</span> </li>
        <li> <span>16:00</span> </li>
 </ul>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">14</div>
        <div class="swiper-slide"> 15</div>
        <div class="swiper-slide">16</div>
    </div>
</div>

CSS

    <link rel="stylesheet" href="./css/swiper.min.css">

JS

<script src="js/jquery.min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script src="js/swiperTab.js"></script>
<script>
    $(function () {
        tabs('.swiperTab > li','.swiper-container');
    });
</script>

JS文件内容

/*swiperTab.js 选项卡函数*/
function tabs(obj,swiperObj) {
    var tabSwiper = new Swiper(swiperObj, {
        speed : 500,
        autoHeight: true, //高度随内容变化
        onSlideChangeStart : function() {
            $(obj).removeClass('active');
            $(obj).eq(tabSwiper.activeIndex).addClass('active');
        }
    });
    $(obj).on('touchstart mousedown', function(e) {
        e.preventDefault();
        $(obj).removeClass('active');
        $(this).addClass('active');
        tabSwiper.slideTo($(this).index());
    });
    $(obj).click(function(e) {
        e.preventDefault();//阻止默认事件
    });
}