想要适配手机端和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端)的更多相关文章

  1. 用JS判断用户使用的是手机端还是pc端访问

    最近项目中用到一个应用,当访问同一个网站地址的时候,例如:www.xxx.com的时候,如果当前客户端是pc则跳转到专注于pc的部分,如果当前客户机是手机,则跳转到专注于手机的部分,秉承一贯的习惯,b ...

  2. js判断客户端是手机端还是PC端

    封装函数: function isPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", ...

  3. js如何判断是手机端还是PC端访问

    function isMobile(){ var sUserAgent= navigator.userAgent.toLowerCase(), bIsIpad= sUserAgent.match(/i ...

  4. JS判断手机端和PC端自动跳转

    <script type="text/javascript">     function browserRedirect() {     var sUserAgent ...

  5. js判断是手机端还是pc端访问

    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { window.location.href = " ...

  6. js手机端和pc端加载不同的样式

    function loadCSS() {     if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android| ...

  7. js判断手机端和pc端

    var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; retu ...

  8. JS前端开发判断是否是手机端并跳转操作(小结)

    JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...

  9. jQery简单Tab选项卡效果

    简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

随机推荐

  1. MySQL:管理MySQL、事务(三)

    干货: 命令行程序mysql实际上是MySQL客户端,真正的MySQL服务器程序是mysqld,在后台运行. 数据库事务具有ACID特性,用来保证多条SQL的全部执行. 五.MySQL 通过mysql ...

  2. tomcat增加运行内存

    内容为: set JAVA_OPTS=%JAVA_OPTS% -server -Xms2048m -Xmx2048m -XX:PermSize=212M -XX:MaxPermSize=512m 在m ...

  3. 1016 部分A+B (15 分)

    // 题目不难,感觉变量定义的有点儿多了#include <iostream> #include <cmath> using namespace std; int main() ...

  4. 数论(Lucas定理) HDOJ 4349 Xiao Ming's Hope

    题目传送门 题意:求C (n,0),C (n,1),C (n,2)...C (n,n)中奇数的个数 分析:Lucas 定理:A.B是非负整数,p是质数.AB写成p进制:A=a[n]a[n-1]...a ...

  5. Python学习 day15

    一.内置函数(共68个) 1.作用域相关(2) locals(*args, **kwargs)  --  返回本地作用域中的所有名字 globals(*args, **kwargs)  --  返回全 ...

  6. react大纲

    课程大纲: https://miaov.com/index.php/news/newsDetail/nid/263  原文件 Npm 基本使用 切换镜像, 国内的网络访问 npm 服务器可能比较慢, ...

  7. 浅谈C#.NET防止SQL注入式攻击

    1#region 防止sql注入式攻击(可用于UI层控制)  2  3///   4/// 判断字符串中是否有SQL攻击代码  5///   6/// 传入用户提交数据  7/// true-安全:f ...

  8. 【linux】虚拟机内装Linux系统的ssh访问

    一般在虚拟机内安装一个Linux系统,虚拟机网络设置为桥接后,Linux系统会在安装的过程中自动设置其为dhcp配置,会给其随机分配一个ip,这个ip可以用命令 "ifconfig" ...

  9. [PY3]——求TopN/BtmN 和 排序问题的解决

    需求 K长的序列,求TopN K长的序列,求BtmN 排序问题 解决 heap.nlargest().heap.nsmallest( ) sorted( )+切片 max( ).min( ) 总结和比 ...

  10. 安装并开启ssh服务

    sudo yum install openssh*    安装 2. 设置 sudo vi /etc/ssh/sshd_config 首先先把port改掉port 52222 限制用户AllowUse ...