Html
<!doctype html>
Radio function
$(". ListItem "). Find (". Itemicon "). Removeclass (" SelectedItem ");
$(". ListItem "). EQ ($ (a). Index ()). Find (". Itemicon "). AddClass (" SelectedItem ");
Css
body{margin:0px Auto;
Background: #efeff4;
position:relative;
Display:block;
padding:44px 0px 64px 0px;
height:100%; }/* Head style * *. Top.
btninsert{height:44px;
Float:right;
padding-right:10px;
font-size:16px;
Color: #228924;
line-height:44px; }
. Top.
btncancel{height:44px;
line-height:44px;
Float:left;
padding-left:10px;
BACKGROUND-SIZE:12PX 20px;
Color: #d6d6d7;
font-size:16px; }. wxpictureversionmodule{width:100%}/*tab tab/. Wxpictureversionmodule.
tablistcontent{width:72px;
position:fixed;
bottom:0px;
top:44px;
left:0px;
Overflow:auto;
Overflow-x:hidden; }. Wxpictureversionmodule.
tablist{width:68px;
height:100%;
Background-color: #ffffff;
font-size:16px;
line-height:44px;
border-right:1px solid #d9d9d9; }. Wxpictureversionmodule.
Tablist. selected{border-left:2px solid #f43530;
Background-color: #efeff4;
Border-right:none; ColoR: #f43530; }. Wxpictureversionmodule.
Tablist. Selected a{color: #f43530;} . Wxpictureversionmodule.
Tablist li{width:67px;
height:44px;
border:1px solid #d9d9d9;
Background-color: #ffffff;
Border-top:none; }. Wxpictureversionmodule.
Tablist h3{padding-left:10px;
font-size:16px; }
.
Liend {border-bottom:1px solid #efeff4;} /* Graphic 1-1*/.
tablistitem{Overflow:hidden;
Zoom:1; }
. Tablistitem.
listitem1{margin-top:10px;
margin-left:82px;
margin-right:10px; }
. Tablistitem. ListItem1.
itemicon{border:1px solid #efeff4;
position:relative; }
. Tablistitem. ListItem1.
Itemicon img{width:100%;
Height:auto;
Vertical-align:middle; }
. Tablistitem.
selecteditem{border:1px solid #f43530; }
. Tablistitem. ListItem1.
selecteditem:after{content: "";
width:22px;
height:22px;
Position:absolute;
right:0px;
bottom:0px; Background:url (".. /images/mobile_bg0303.png ") Right bottom no-repeat;
BACKGROUND-SIZE:22PX 22px;
width:100%; } @media (min-width:600px) {. Tablistitem. ListItem1.
itemicon{width:275px;
margin:0 Auto;
position:relative; }
. Tablistitem.
selecteditem{border:1px solid #f43530; }
. Tablistitem. ListItem1.
selecteditem:after{content: "";
width:22px;
height:22px;
Position:absolute;
right:0px;
bottom:0px; Background:url ("..
/images/mobile_bg0303.png ") Right bottom no-repeat;
BACKGROUND-SIZE:22PX 22px;
width:100%; }/* Graphic 1-2*/. Tablistitem.
listitem1-2{margin-top:10px;
margin-left:82px;
margin-right:10px; }
. Tablistitem. Listitem1-2.
itemicon{border:1px solid #efeff4;
position:relative; }
. Tablistitem. Listitem1-2.
Itemicon img{width:100%;
Height:auto;
Vertical-align:middle; }
. Tablistitem.
selecteditem{border:1px solid #f43530; }
. TAblistitem. Listitem1-2.
selecteditem:after{content: "";
width:22px;
height:22px;
Position:absolute;
right:0px;
bottom:0px; Background:url ("..
/images/mobile_bg0303.png ") Right bottom no-repeat;
BACKGROUND-SIZE:22PX 22px;
width:100%; } @media (min-width:600px) {. Tablistitem. Listitem1-2.
itemicon{width:275px;
margin:0 Auto;
position:relative; }
. Tablistitem.
selecteditem{border:1px solid #f43530; }
. Tablistitem. Listitem1-2.
selecteditem:after{content: "";
width:22px;
height:22px;
Position:absolute;
right:0px;
bottom:0px; Background:url ("..
/images/mobile_bg0303.png ") Right bottom no-repeat;
BACKGROUND-SIZE:22PX 22px;
width:100%;
}
}