想要适配手机端和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. Schema Workbench 启动慢

    原始是JDBC连接设定的时候需要在参数中增加下列选项 FILTER_SCHEMA_LIST 官方的解释是 就是去搜寻连接数据库的所有的表结构,表越大越慢. 也要把这选项去除,保存数据库链接,并重新登录 ...

  2. PHP错误与异常处理

    https://www.cnblogs.com/zyf-zhaoyafei/p/6928149.html 请一定要注意,没有特殊说明:本例 PHP Version < 7 说起PHP异常处理,大 ...

  3. mongo嵌套查询

    db.getCollection('TradeBookingRepresentation').find({uitid:'168282:20190214010009224', tradeVersion: ...

  4. J15W-J45W全铜质截止阀厂家，J15W-J45W全铜质截止阀价格 - 专题栏目 - 无极资讯网

    无极资讯网 首页 最新资讯 最新图集 最新标签   搜索 J15W-J45W全铜质截止阀 无极资讯网精心为您挑选了(J15W-J45W全铜质截止阀)信息,其中包含了(J15W-J45W全铜质截止阀)厂 ...

  5. DB2 锁问题的监控和解决

    常见的锁问题包括: 锁等待 锁超时 锁升级 死锁 而根据问题的特性通常分为两种: 实时事件:问题正在发生 历史事件:问题已经过去 如果实时事件,DBA 可以通过查看表信息.GET SNAPSHOT 或 ...

  6. Eclipse的简单的用法大全

    Eclipse我认为最重要的功能:断点调试 Debug的作用: 调试程序并且查看程序的执行流程 如何查看程序执行的流程 断点(就是一个标记,表示从哪里开始) 设置断点(在你想要断点的代码的左边双击即可 ...

  7. Django去操作已经存在的数据库

    你有没有遇到过这种情况? 数据库,各种表结构已经创建好了,甚至连数据都有了,此时,我要用Django管理这个数据库,ORM映射怎么办??? Django是最适合所谓的green-field开发,即从头 ...

  8. sencha touch 手势识别左右滑动

    sencha touch 中添加手势识别非常简单,就是监听 dom 元素的 move 事件: 1. 为你的 view 注册 swipe 事件 // 为当前 view 注册手势滑动事件 Ext.get( ...

  9. MySql的索引操作

    索引是一种特殊的数据库结构,可以用来快速查询数据库表中的特定记录.索引是提高数据库性能的重要方式.MySQL中,所有的数据类型都可以被索引.MySQL的索引包括普通索引.唯一性索引.全文索引.单列索引 ...

  10. html锚点(mao dian)--特殊的超链接

    锚点(anchor):其实就是超链接的一种,一种特殊的超链接 普通的超链接,<a href="路径"></a> 是跳转到不同的页面 而锚点,<a hr ...