CSS3 and JS Simple implementation tab effect (suitable for mobile and PC side)

There are several simple ways to fit the mobile and PC side, and I'm using a percentage allocation method.

*{padding:0;margin:0;} Body,html{width:100%;height:100%;overflow:hidden;} #bottom_box {width:100%;height:50px;background-color: #eee;d Isplay:flex;   This is the flex layout, where the parent element is set to flex, and the child elements set a few equal parts are divided into equal portions position:fixed;bottom:0px;}. tab{flex:1;    The child elements are average 1:1:1:1 meaning text-align:center;padding-top:5px; }img{width:22px;} #main_container {width:400%;height:100%;overflow:hidden;position:relative;transition:left. 5s ease;  Transition is CSS3 animation, can smooth transition effect, compatible with mobile side} #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) "><div class=" tab_word_01 "> Home </div></div><div id=" tab_02 "class=" tab "onclick=" HintShow (1 ) "><div class=" tab_word_01 "> Medicine box </div></div><div id=" tab_03 "class=" Tab "Onclick=" Hintshow (2) "><div class=" tab_word_01 "> Shopping cart </div></div> <div id= "tab_04" class= "tab" onclick= "Hintshow (3)" ><div class= "tab_word_01" > Personal Center </div></div></div>

JS Code:

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";}}

To be compatible with mobile phones, you must add <meta name= "viewport" content= "width=device-width,initial-scale=1 in the

It is easy to implement the tab effect.

CSS3 and JS Simple implementation tab effect (suitable for mobile and PC side)