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"> < ...
随机推荐
- MySQL:管理MySQL、事务(三)
干货: 命令行程序mysql实际上是MySQL客户端,真正的MySQL服务器程序是mysqld,在后台运行. 数据库事务具有ACID特性,用来保证多条SQL的全部执行. 五.MySQL 通过mysql ...
- tomcat增加运行内存
内容为: set JAVA_OPTS=%JAVA_OPTS% -server -Xms2048m -Xmx2048m -XX:PermSize=212M -XX:MaxPermSize=512m 在m ...
- 1016 部分A+B (15 分)
// 题目不难,感觉变量定义的有点儿多了#include <iostream> #include <cmath> using namespace std; int main() ...
- 数论(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 ...
- Python学习 day15
一.内置函数(共68个) 1.作用域相关(2) locals(*args, **kwargs) -- 返回本地作用域中的所有名字 globals(*args, **kwargs) -- 返回全 ...
- react大纲
课程大纲: https://miaov.com/index.php/news/newsDetail/nid/263 原文件 Npm 基本使用 切换镜像, 国内的网络访问 npm 服务器可能比较慢, ...
- 浅谈C#.NET防止SQL注入式攻击
1#region 防止sql注入式攻击(可用于UI层控制) 2 3/// 4/// 判断字符串中是否有SQL攻击代码 5/// 6/// 传入用户提交数据 7/// true-安全:f ...
- 【linux】虚拟机内装Linux系统的ssh访问
一般在虚拟机内安装一个Linux系统,虚拟机网络设置为桥接后,Linux系统会在安装的过程中自动设置其为dhcp配置,会给其随机分配一个ip,这个ip可以用命令 "ifconfig" ...
- [PY3]——求TopN/BtmN 和 排序问题的解决
需求 K长的序列,求TopN K长的序列,求BtmN 排序问题 解决 heap.nlargest().heap.nsmallest( ) sorted( )+切片 max( ).min( ) 总结和比 ...
- 安装并开启ssh服务
sudo yum install openssh* 安装 2. 设置 sudo vi /etc/ssh/sshd_config 首先先把port改掉port 52222 限制用户AllowUse ...