想要适配手机端和pc端，有几种简单的方法，本人使用的是百分比分配的方法。
*{
padding: 0;
margin: 0;
}
body,html{
width: 100%;
height: 100%;
overflow: hidden;
}
#bottom_box{
width: 100%;
height: 50px;
background-color: #eee;
display: flex; //这是flex布局，父元素设置为flex，子元素设置几等份就是分成几等份
position: fixed;
bottom: 0px;
}
.tab{
flex:1; //子元素都平均是1：1：1：1的意思
text-align: center;
padding-top:5px;
}
img{
width: 22px;
}
#main_container{
width: 400%;
height: 100%;
overflow: hidden;
position: relative;
transition:left .5s ease; //transition是css3的动画，能够平滑的过渡效果，兼容移动端
}
#box_01,#box_02,#box_03,#box_04{
width: 25%;
height: 100%;
float: left;
}
#box_01{
background-color: #ccc;
}
#box_02{
background-color: pink;
}
#box_03{
background-color: red;
}
#box_04{
background-color: green;
}
<div id="main_container" style="left:0%"> <div id="box_01">01</div> <div id="box_02">02</div> <div id="box_03">03</div> <div id="box_04">04</div> </div> <div id="bottom_box"> <div id="tab_01" class="tab" style="background-color:orange" onclick="hintShow(0)"> <img src="1.png" /> <div class="tab_word_01">首页</div> </div> <div id="tab_02" class="tab" onclick="hintShow(1)"> <img src="1.png" /> <div class="tab_word_01">药箱</div> </div> <div id="tab_03" class="tab" onclick="hintShow(2)"> <img src="1.png" /> <div class="tab_word_01">购物车</div> </div> <div id="tab_04" class="tab" onclick="hintShow(3)"> <img src="1.png" /> <div class="tab_word_01">个人中心</div> </div> </div>
js代码：
var main_container=document.getElementById(‘main_container‘);
var tab_01=document.getElementById(‘tab_01‘);
var tab_02=document.getElementById(‘tab_02‘);
var tab_03=document.getElementById(‘tab_03‘);
var tab_04=document.getElementById(‘tab_04‘);
function hintShow(ele){
if(ele==0){
main_container.style.left="0%";
tab_01.style.backgroundColor="orange";
tab_02.style.backgroundColor="";
tab_03.style.backgroundColor="";
tab_04.style.backgroundColor="";
}else if(ele==1){
main_container.style.left="-100%";
tab_01.style.backgroundColor="";
tab_02.style.backgroundColor="orange";
tab_03.style.backgroundColor="";
tab_04.style.backgroundColor="";
}else if(ele==2){
main_container.style.left="-200%";
tab_01.style.backgroundColor="";
tab_02.style.backgroundColor="";
tab_03.style.backgroundColor="orange";
tab_04.style.backgroundColor="";
}else if(ele==3){
main_container.style.left="-300%";
tab_01.style.backgroundColor="";
tab_02.style.backgroundColor="";
tab_03.style.backgroundColor="";
tab_04.style.backgroundColor="orange";
}
}
想要兼容手机端，必须在<head></head>标签中加上<meta name="viewport" content="width=device-width,initial-scale=1,max-scale=1.0">
很简单就实现了选项卡效果。
时间： 2024-12-20 14:57:38