CSS3及JS简单实现选项卡效果(适配手机端和pc端)
想要适配手机端和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">
很简单就实现了选项卡效果。
CSS3及JS简单实现选项卡效果(适配手机端和pc端)的更多相关文章
- 用JS判断用户使用的是手机端还是pc端访问
最近项目中用到一个应用,当访问同一个网站地址的时候,例如:www.xxx.com的时候,如果当前客户端是pc则跳转到专注于pc的部分,如果当前客户机是手机,则跳转到专注于手机的部分,秉承一贯的习惯,b ...
- js判断客户端是手机端还是PC端
封装函数: function isPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", ...
- js如何判断是手机端还是PC端访问
function isMobile(){ var sUserAgent= navigator.userAgent.toLowerCase(), bIsIpad= sUserAgent.match(/i ...
- JS判断手机端和PC端自动跳转
<script type="text/javascript"> function browserRedirect() { var sUserAgent ...
- js判断是手机端还是pc端访问
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { window.location.href = " ...
- js手机端和pc端加载不同的样式
function loadCSS() { if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android| ...
- js判断手机端和pc端
var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; retu ...
- JS前端开发判断是否是手机端并跳转操作(小结)
JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...
- jQery简单Tab选项卡效果
简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
随机推荐
- 2016级算法第二次上机-G.ModricWang's Real QuickSort
873 思路 这是一道非常基础的题,目的是帮助大家回顾快排相关的知识.大家完成此题之后应该就对快排有比较深刻的印象了. 对于整个快排的流程,题目描述中已经给了清晰完整的伪代码.需要自己加工的部分就是, ...
- PHP用curl远程下载图片
function http_get_data($url){ $ch = curl_init (); curl_setopt ( $ch, CURLOPT_CUSTOMREQUEST, 'GET' ); ...
- 主流服务器虚拟化技术简单使用——KVM(一)
Tips:因为博客园排版的原因,图片显示不清晰,可以放大网页查看清晰图片. 如果系统使用物理机,需要在BIOS里面开启Intel VT-x(或AMD-V),如果是VMware workstation, ...
- 基础篇:3.4)3d模型绘制的好坏会影响产品合格率(注意点)
本章目的:为了量产品的产能与合格率,重视3d图纸. 1.前言 作者希望本文能引起重视,是那些刚入行业的菜鸟: 还有只用2d图纸,便能绘制出能量产合格品的前辈大牛工程师. 2.3d图纸不合格的现状及典型 ...
- 针对ACM输出格式的一个小技巧(对格式错误说不!)
printf("%d%c",bmax," \n"[i==n]); 上文中bmax为题目中需要输出的整形变量,可以脑补很多ans,max之类的,重点在于%c和后面 ...
- crontab例行性共作
一.单一工作调度 at [-mldv] TIME at -c 工作号码 -m:当at工作结束后,即是没有输出信息,以email通知用户该工作已完成 -l:at -l相当于atq,列出目前系统上所有的a ...
- 关于z-index问题
关于z-inde,这个网址还是对我受益匪浅的,https://www.cnblogs.com/bigboyLin/p/4621335.html z-index 起作用得有一个前提: 就是和定位一起用, ...
- linux curl post/put请求
案列: -X: 请求方式 --header: 请求header -d: 请求的数据 最后跟上请求的地址 curl -X PUT --header 'Content-Type: application/ ...
- C#常用的引用
1.使用ConfigurationManager需要在.net引用中添加System.Configuration引用 2.使用HttpContext需要在.net引用中添加System.Web引用
- selenium+Python(Page Object 设计模式实例)
以下实例演示了采用了page Object设计模式的方式登录qq空间: 1.创建基础类page:在初始方法__init__()定义驱动的(driver),基本url(base_url)和超时时间(ti ...