Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.