可滚动选项卡-切换

大致样子如下：

html如下：

<div class="left_dy">
                        <a class="btn_pre" id="btnPre"><font>上一页</font></a>
                        <div class="change_box">
                            <ul class="change_box_list" id="changeBoxList">
                                <li>
                                   <a href="javascript:;" class="btn_h">
                                        See0
                                   </a>
                                </li>
                                <li>
                                   <a href="javascript:;" class="">
                                        See1
                                   </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="">
                                        See2
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="">
                                       See3
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="">
                                        See4
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="">
                                        <span class="change_box_list_s1">赵晓霞6</span>
                                        <span class="change_box_list_s2">总计：<font>1,000.00</font></span>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="">
                                        <span class="change_box_list_s1">赵晓霞7</span>
                                        <span class="change_box_list_s2">总计：<font>1,000.00</font></span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <a class="btn_next" id="btnNext"><font>下一页</font></a>
                    </div>

<div class="event_box">
     <ul class="event_list" id="eventList">
        <li>
                0000000000000
        </li>
        <li>
                11111111111
        </li>
        <li>
                2222222222222
        </li>
        <li>
                33333333333333
        </li>
        <li>
                444444444444
        </li>
     </ul>
</div>

<script>
    
    /*可滚动选项卡-切换 S*/
    var btnPre = document.getElementById("btnPre");
    var btnNext = document.getElementById("btnNext");
    var changeBoxList = document.getElementById("changeBoxList");
    var eventList = document.getElementById("eventList");
    var eventListLi = eventList.children;
    var changeBoxListA = changeBoxList.getElementsByTagName("a");
    
    //左侧显示区域 显示几个切换按钮，就写几
    var keepNum = 7;
    
    //获取需要滚动的值(整体ul的高度减去显示区域的高度)
    var scrolltopNum = changeBoxList.offsetHeight - changeBoxListA[0].offsetHeight * keepNum;
    
    //Li的高度
    var liHight = changeBoxList.children[0].offsetHeight;
    
    //点击变量
    var num = 0;
    
    //当前索引
    //var _thisIndex = 0;
    
    //点击每个单独的员工
    for(var i = 0; i<=changeBoxListA.length-1; i++ ){
        
        changeBoxListA[i].index = i;
        changeBoxListA[i].onclick = function(){
           for(var i = 0; i<=changeBoxListA.length-1; i++ ){
               eventListLi[i].style.display = "none";
               changeBoxListA[i].className = "";
           }
           eventListLi[this.index].style.display = "block";    
           changeBoxListA[this.index].className = "btn_h";
           
        }


    }
    
    
    //点击上一页
    btnPre.onclick = function(){
        
        
        
        if( num <= 0){
            changeBoxList.style.top = 0 + "px";
        }else{
            num--;
            changeBoxList.style.top = -(num * liHight ) + "px";
        }
        
        //隐藏所有，显示当前
        /*for(var i = 0; i<=eventListLi.length-1; i++ ){
            eventListLi[i].style.display = "none";
            changeBoxListA[i].className = "";
        }
        eventListLi[num].style.display = "block";
        changeBoxListA[num].className = "btn_h";*/
        //当前值
        /*console.log(num);*/
        
    }
    
    //点击下一页
    btnNext.onclick = function(){
        
        //判断整体ul的top值是否大于需要滚动的值，如果大于，代表可以滚动
        if( changeBoxList.offsetTop <= -scrolltopNum ){
            if( changeBoxList.offsetTop == 0 ){
                changeBoxList.style.top = 0 + "px";
            }else{
                changeBoxList.style.top = -scrolltopNum + "px";
            }
            
        }else{
            num++;
            changeBoxList.style.top = -(num * liHight) + "px";
        }
        
        //隐藏所有，显示当前
        /*for(var i = 0; i<=eventListLi.length-1; i++ ){
            eventListLi[i].style.display = "none";
            changeBoxListA[i].className = "";
        }
        eventListLi[num].style.display = "block";
        changeBoxListA[num].className = "btn_h";*/
        //当前值
        /*console.log(num);*/
        
    }
    
    
    /*左侧员工滚动切换 E*/
    
</script>

PS:如果需要改成横向切换的，可以更改：Height---width，offsetHeght--offsetWidth