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