TAB切换

作者: 令武 | 来源:发表于2018-11-05 10:36 被阅读0次

// tab

$(function(){

    function tabSwitch(tab,tabbox,box){

        this.tab = tab;

        this.tabbox = tabbox;

        this.box = box;

        tabSwitch.prototype.switch = function(){

            $(tabbox).find(box +":first").show();    //为每个BOX的第一个元素显示       

            $(tab).on("click",function(){ //给a标签添加事件

                var index=$(this).index();  //获取当前a标签的个数 

                $(this).parent().next().find(box).hide().eq(index).show(); //返回上一层,在下面查找css名为box隐藏,然后选中的显示 

                $(this).addClass("active").siblings().removeClass("active"); //a标签显示,同辈元素隐藏

                // 滚动到底部

                var height = $(box).height();

                $(tabbox).scrollTop(height);     

            })

        }     

    }

    // 消息内容切换

    var TAB = new tabSwitch('.message-tab span','.message-list','.message-box');

    TAB.switch();

})

相关文章

网友评论

      本文标题:TAB切换

      本文链接:https://www.haomeiwen.com/subject/ssgjxqtx.html