JS实现APP中常见的Tab点击切换和隐藏标签页（纵向，可自适应屏幕）

示意图

实现效果

点击非活动tab标签会隐藏当前的活动tab页，并显示刚点击的tab页内容；向下滚动时标题栏会一直浮动于屏幕最上方。 

JS代码

window.onload=function(){
	    var toTop = new Array();
	    var queSize = new Array();
	    	for(i=1;i<=4;i++){
	    		var queid = "eleque_"+i;
	    		var Top = document.getElementById(queid).offsetTop; //获取各标题距顶部的距离
	    		toTop.push(Top);
	    		var queheight = document.getElementById(queid).offsetHeight;
	    		queSize.push(queheight);
	    	}
	  		window.onscroll=function(){
	  		for(i=1;i<=4;i++){
	  		var queid = "eleque_"+i;
	    	var contentid = "content_"+i;
	    	var content = document.getElementById(contentid);
	    	var showif = getStyle(content,"display");//判断该标题是否被点开展示
	    	if(showif=="block"){
                var topScroll =document.documentElement.scrollTop;
                var que  = document.getElementById(queid);
                var contentheight = document.getElementById(contentid).offsetHeight;
                if(topScroll > toTop[i-1]){  //滚动的距离大于距顶部的距离时，定位改为fixed
                    que.style.position = 'fixed';
                    que.style.top = '0';
                    que.style.zIndex = '9999';
                    document.getElementById("que_1").style.display = 'block'; //该DIV用于支撑标题脱离文档流后的位置
                    document.getElementById("que_1").style.height = queSize[i-1] + 'px';
                }else{
                    que.style.position = 'static'; //滚动距离小于距顶部距离时，定位恢复默认
                    document.getElementById("que_1").style.display = 'none';
                }
            			}else{
                var que  = document.getElementById(queid); //如果该标题没有被点击展开则为默认定位
                que.style.position = 'static';
            			}
	    }
	    }
            }
	    function getStyle(element, attr) {
        if(element.currentStyle) {
                return element.currentStyle[attr];
        } else {
                return getComputedStyle(element, false)[attr];
        }
		}
	    function show(num){
	    for(i=1;i<=4;i++){
	    	if(i!=num){
	    	var allid = "content_" + i;
	    	var all = document.getElementById(ansid);
	    	var imgid = "img_" + i;
	    	document.getElementById(allid).style.display="none";
	    	document.getElementById(imgid).src="../../images/down.png";
	    	}
	    }
	    var ansid = "content_" + num;
	    var ans = document.getElementById(ansid);
	    var imgid = "img_" + num;
	    var ifshow = getStyle(ans,"display");
	    if(ifshow == "none"){
	    	document.getElementById(ansid).style.display="block";
	    	document.getElementById(imgid).src="../../images/up.png";
	    }else{
	    	document.getElementById(ansid).style.display="none";
	    	document.getElementById(imgid).src="../../images/down.png";
	    	document.getElementById("que_1").style.display = 'none';
	    }
	    
	    }

HTML代码

 

<div class="content">
    <div class="que" id="eleque_1" onclick="show(1)">
        <p>在配电室、变电站、高压线路等附近居住对人体是否有害？</p><img id="img_1" src="../../images/down.png">
    </div>
    <div id="que_1" style="width:100%;display:none"></div>
    <div class="content" id="content_1">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在配电室、变电站、高压线路等供电设施附近居住对人体不会有伤害。</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.首先配电室、变电站、高压线路等供电设施不会产生电磁辐射，
            这是因为交流输变电设施是通过电磁感应对周围环境产生影响的,产生的工频电场和工频磁场属于极低频场，
            其频率只有50赫兹，波长很长，达6000公里，而输电线路本身，由于其长度一般远小于这个波长，
            因此不能构成有效的电磁辐射（频率在100千赫兹及以上的才能形成辐射）。
            在国际权威机构的文件中，交流输变电设施产生的电场和磁场被明确地称为工频电场和工频磁场，而不是电磁辐射。
            电网企业的员工长时间从事输变电设施的运行和维护工作，也没有发现员工身体健康受到电网设备电磁场的不良影响。</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            2.配电室、变电站、高压线路等供电设施的设立与规划都是经过市规划局、环保局的严格审批，
            符合环境安全标准，对人体的健康是没有危害的。
        </p>
    </div>
    <div class="que" id="eleque_2" onclick="show(2)">
        <p>用户发生哪些用电事故，应及时向供电企业报告？</p><img id="img_2" src="../../images/down.png">
    </div>
    <div class="content" id="content_2">
        <p>（1）人身触电死亡；</p>
        <p>（2）导致电力系统停电；</p>
        <p>（3）专线掉闸或全厂停电；</p>
        <p>（4）电气火灾；</p>
        <p>（5）重要或大型电气设备损坏；</p>
        <p>（6）停电期间向电力系统倒送电。</p>
        <p>供电企业接到用户上述事故报告后，应派员赴现场调查，在七天内协助用户提出事故调查报告。</p>
    </div>
    <div class="que" id="eleque_3" onclick="show(3)">
        <p>违章用电行为有哪些？</p><img id="img_3" src="../../images/down.png">
    </div>
    <div class="content" id="content_3">
        <p>（1）擅自改变用电类别；</p>
        <p>（2）擅自超过合同约定的容量用电；</p>
        <p>（3）擅自使用已经在供电企业办理暂停使用手续的电力设备，或者擅自启用已经被供电企业查封的电力设备；</p>
        <p>（4）擅自迁移、更动或者擅自操作供电企业的用电计量装置、电力负荷控制装置、供电设施以及约定由供电企业调度的客户受电设备；</p>
        <p>（5）未经供电企业许可，擅自引入、供出电源或者将自备电源擅自并网。</p>
    </div>
    <div class="que" id="eleque_4" onclick="show(4)">
        <p>安全电压的标准</p><img id="img_4" src="../../images/down.png">
    </div>
    <div class="content" id="content_4">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所谓安全电压，是指为了防止触电事故而由特定电源供电时采用的电压系列。
            这个电压系列的上限值，即两导体间或任一与地之间的电压，在任何情况下，都不超过交流有效值50伏。</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我国规定安全电压额定值的等级为42、36、24、12、6伏。
            当电气设备采用的电压超过安全电压时，必须按规定采取防止直接接触带电体的保护措施。</p>
    </div>
    </div>

CSS代码

 #content_1,#content_2,#content_3,#content_4{
     	display:none;
     	border-bottom:1px #EDEDED solid;
     	margin-top:0;
     }
*{margin: 0;padding: 0;}
html,body{height: 100%;background:#f2f2f2;}
.content{margin:0;}
.content p{margin: 10px;color: #666;line-height: 25px;}
.que{
     	background:#ffffff;
     	border-bottom:1px #EDEDED solid;
     	padding:10px;
     	margin:0;
     	line-height:30px;
     	width:100%;
     	display: flex;
    	align-items: center;
    	justify-content: space-between;
     }
.que img{
	    width: 20px;
    	height: 20px;
    	margin-right: 25px;
}