How to achieve the effect of multi-role tab login
This article focuses on "how to achieve multi-role tab login effect", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve multi-role tab login effect"!
The login effect of the multi-role tab is as follows:
In fact, the characters selected in the green border will also be marked green, but this is the effect when the screenshot comes out.
The html code is as follows:
Roles Tab
$(function () {)
$('.tabPanel ul li') .click (function () {
$(this) .addClass ('hit'). Siblings (). RemoveClass (' hit')
$('.panes > div:eq (' + $(this). Index () +'). Show (). Siblings (). Hide ()
})
})
Enterprise side
Supplier side
Beijing Sports Network
User name:
Secret code:
Forget the password.
Apply to become a supplier free of charge
Apply to become an enterprise free of charge
Secend tab content
First tab content
Third tab content
First tab content
The CSS code is as follows:
@ charset "utf-8"
/ * CSS Document * /
* {margin:0;padding:0;word-wrap:break-word;word-break:break-all;}
Body {font-family: "Song style", "Arial"; font-size:12px;background:#fff;min-width:800px;}
Ul,li {list-style:none;}
A {text-decoration:none;color:#555;}
H4 {font-size:14px;font-weight:bold;margin:0em 0 0.5em 0;}
H3 {font-size:16px;font-weight:bold;margin:1em 0}
/ * * tabs**/
.tabPanel ul {height:23px;border-bottom:1px solid # CECECE; width:294px;}
.tabPanel ul li {
Float:left;margin:0 2px 0 0borderbank 1px solid # CECECE;font-size:13px;height:22px;line-height:22px;width:94px;text-align:center;cursor:pointer
Font-family: "Microsoft Yahei"
Text-shadow:0 1px 0 # fff
Border-radius:4px 4px 0 0
Box-shadow:inset 0 1px 0 rgba (255,255,255,0.5)
/ * background:#ddd
Background:-moz-linear-gradient (top, # eee, # ddd)
Background:-webkit-gradient (linear, left top, left bottom, from (# eee), to (# ddd); * /
}
.tabPanel .hit {
Border-color:#B9D894 # B9D894 # FFF;cursor:pointer;color:black;text-shadow:0 1px 0 # FFF
/ * background:#fff
Background:-webkit-gradient (linear, left top, left bottom, from (# e1e1e1), to (# fff))
Background:-moz-linear-gradient (top, # e1e1e1, # fff); * /
}
. border:1px solid # B9D894 borderhouse topbank 0min MineheightRod 100pxTritBackgroundachrome colorantion displayRunner; width:290px; height:285px}
.roomp {padding:15px 15px 0 10px;}
.roomh5 {padding:15px 15px 0 10pxtransferfontllizize14pxpositionFontMuthweightBold;}
/ * 888888888888888888888888888888 /
# Main {
/ * background-color: # fff
Border-color: # bbb
Border-right: 1px solid # bbb
Border-style: solid;*/
Border-width: 1px
Padding: 30px 20px 30px 30px
Text-align: left
Font-family: "Microsoft Yahei"
Font-size: 13px
}
Div#Heading {
Color: # 904
Font-family: arial
Font-size: 150%
Font-weight: bold
Margin: 0
Padding: 0 0 15px
}
H3 {
Border-bottom: 1px solid # ddd
Color: # 999
Font-size: 105%
Font-weight: bold
Margin: 0 0 8px
Padding: 0
Text-transform: uppercase
}
P {
Margin: 0
Padding: 6px 0
}
.MyLabel {
Color: # 999
Display: block
Font-size: 13px
Font-weight: bold
Margin: 6px 0 2px
Text-transform: uppercase
}
Input.Textbox {
Font-family: verdana,arial,sans-serif
Height: 20px
/ * padding: 2pxwitting /
Width: 160px
Border:1px solid # CECECE
}
A.Button:link {
Background: none repeat scroll 0 0 # 904
Border-color: # 999
Border-right: 1px solid # 999
Border-width: 1px
Color: # fff
Display: block
Font-family: Verdana
Font-size: 15px
Font-weight: bold
Padding: 5px 12px 3px 20px
Width: 50px
}
A.Button:visited {
Background: none repeat scroll 0 0 # 904
Border-color: # 999
Border-right: 1px solid # 999
Border-style: solid
Border-width: 1px
Color: # fff
Display: block
Font-size: 15px
Font-weight: bold
Padding: 3px 12px
Width: 60px
}
Span.ErrorMessage {
Color: # 904
Display: block
Font-weight: bold
}
P.Small {
Font-size: 85%
Margin-top: 12px
}
.Button {
Color:#FFF
Font-family: "Microsoft Yahei"
Font-size: 13px
Font-weight: bold
/ * padding-bottom: 3px
Padding-top: 5pxSingapore /
Width: 60px
Background-color:#73AD2E
Border-radius:5px
Border:none
}
A.tip_lnk:link, a.tip_lnk:active, a.tip_lnk:visited {
Color:#444
Text-decoration: underline
}
A.top_return {
Font-weight: normal
Padding-left: 5px
}
.form _ div1 {
Height: 50px
Overflow: hidden
}
.form _ div1 span {
Display: block
Float: left
Overflow: hidden
Padding: 0 0 0 6px
}
.form _ div1 .span2 {
Color: # 999
Padding-top: 6px
}
.form _ div1 .input1 {
-moz-border-bottom-colors: none
-moz-border-left-colors: none
-moz-border-right-colors: none
-moz-border-top-colors: none
Border-color: pink
Border-image: none
Border-right: 1px solid pink
Border-style: solid
Border-width: 1px
Color: # 666
Height: 20px
Line-height: 20px
Width: 198px
}
.form _ div1 .input2 {
Width: 109px
}
.form _ div1 .span1 {
/ * padding-top: 6px
Text-align: right;*/
Width: 55px
}
.b {margin:15px 10px 10px 10px;}
At this point, I believe you have a deeper understanding of "how to achieve the effect of multi-role tab login". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
