CSS3及JS简单实现选项卡效果(适配手机端和pc端)
2024-08-25 10:55:24
想要适配手机端和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">
很简单就实现了选项卡效果。
最新文章
- Mac OSX:Powerline风格的zsh配置
- 李洪强iOS经典面试题144-数据存储
- 《DSP using MATLAB》 示例Example4.1
- ABAP 搜索帮助
- iOS WIFI
- Android打开系统的Document文档图片选择
- c语言字符串比较函数strcmp
- 用WebStorm创建Express项目时出现:express version is unavailable
- datetime的精度
- c# 序列化效率比拼
- css样式关键字(initial,inherit,unset,revert,all)
- git remote: HTTP Basic: Access denied Mac 使用Sourcetree 密码输错 再次输入解决方案
- JavaScript js 引入CDN 不生效 注意事项
- 学习excel的使用技巧复制一列文本成新列去重
- 移值UCOS2到M4核与M3核的区别
- AOJ1370: Hidden Anagrams(hash)
- Go语言中的byte和rune区别、对比
- centos rz sz安装
- 外部函数/external
- stm8 单线串口能收不能发