html css support安装设置,css - HTML tabs support - Stack Overflow
Here's a website I'm making, when I select tab 4 (POKEMON#4) it does not deselect the previous tab and when I select a new tab tab 4 (POKEMON#4) does not deselect but the tab I selected initially does.
Html
BAM TeambuilderTeambuilderBuild a Metagame!
Pokemon#3
   Pokemon
Please select a pokemon
1) Simorgh
2) --
3) Flytrap
4) Name Needed
5) Pandoze
6) Apaflite
7) Dendurus
8) Bandirto
9) --
10) Tiflectum
11) Sinder
12) --
13) Springfest
14) Mirrage
15) Skulprit
16) --
17) --
18) Swelter
19) Tundear
20) Slimurk
21) Sluborac
22) Ogre
23) Name Needed
24) Name Needed
25) Cychill
26) Cydnidie
27) Name Needed
28) Name Needed
29) Name Needed
30) Farenheat
       Item
Please select a Item
Apicot Berry
Aspear Berry
Bulletproof Vest
Assault Vest
Cheri Berry
Chesto Berry
Choice Band
Choice Jacket
Choice Scarf
Choice Specs
Choice Vest
Chumchu Berry
Clear Lense
Enchanted Gloves
Enchanted Slippers
Focus Lens
Ganlon Berry
Jakt Berry
Lai Berry
Leftovers
Leichi Berry
Lenses
Lum Berry
Mental Herb
Millstone
Music Box
Noni Berry
Pecha Berry
Petaya
Racing Shoes
Rasin Berry
Rawst Berry
Salac Berry
Simorgite
Flytrapite
Sitrus Berry
Traveller's Boots
Zeppelin
     Ability
Please select a Ability
Enchanted Ivy
Planting Roots
Amplify
Berserk
Dauntless
Disruption
Endurance
Jagged Hide
Kleptomaniac
Mystic Mirror
Mystic Veil
Resolve
Spook
Pain Eater
Specialist
Quick Blows
Troll
Head Start
Build Up
Muddy Armor
Tactician
Forge
Disruption
Overdrive
Tough Scales
Relentless
Fire Proof
Freezing Point
Boiling Point
Strong Tail
Upgraded
Sharp Eye
Mystic Veil
Sharp Shooter
Mastery
Contamination
Superweak Armor
eutrality Barrier
Juggernaut
Immune Defense
Feedbacy
Ghoulify
Super Slams
       Moves
Please select a Move
Move 1
Move 2
Please select a Move
Move 1
Move 2
Please select a Move
Move 1
Move 2
Please select a Move
Move 1
Move 2
First name:
Pokemon#4
Team Member #4
Please select a pokemon
1) Simorgh
2) --
3) Flytrap
4) Name Needed
5) Pandoze
6) Apaflite
7) Dendurus
8) Bandirto
9) --
10) Tiflectum
11) Sinder
12) --
13) Springfest
14) Mirrage
15) Skulprit
16) --
18) Swelter
19) Tundear
20) Slimurk
21) Sluborac
22) Ogre
23) Name Needed
24) Name Needed
26) Cydnidie
27) Name Needed
28) Name Needed
29) Name Needed
30) Farenheat
32) --
33) Spychic
34) Murdoom
35) --
37) Name Needed
38) Name Needed
39) Name Needed
40) Name Needed
41) Name Needed
42) --
43) --
44) --
45) --
46) --
47) --
48) --
49) --
50) --
51) Charidbyss
52) --
53) --
55) Faeum
56) Wyvearn
57) --
58) --
59) --
60) --
Pokemon#5
Team Member #5
Please select a pokemon
1) Simorgh
2) --
3) Flytrap
4) Name Needed
5) Pandoze
6) Apaflite
7) Dendurus
8) Bandirto
9) --
10) Tiflectum
11) Sinder
12) --
13) Springfest
14) Mirrage
15) Skulprit
17) --
18) Swelter
19) Tundear
20) Slimurk
21) Sluborac
22) Ogre
23) Name Needed
24) Name Needed
25) Cychill
27) Name Needed
28) Name Needed
29) Name Needed
31) Celsice
32) --
33) Spychic
34) Murdoom
35) --
36) Name Needed
37) Name Needed
38) Name Needed
39) Name Needed
40) Name Needed
41) Name Needed
42) --
43) --
44) --
45) --
46) --
47) --
48) --
49) --
50) --
51) Charidbyss
53) --
54) --
56) Wyvearn
57) --
58) --
59) --
60) --
CSS
@import url("http://fonts.googleapis.com/css?family=Lato");
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 20px;
text-align: left;
font-family: Lato;
color: #fff;
background: #9b59b6;
}
h1 {
font-weight: normal;
font-size: 40px;
font-weight: normal;
text-transform: uppercase;
float: left;
margin: 20px 0 100px 10px;
}
h1 span {
font-size: 13px;
display: block;
padding-left: 4px;
}
.tabs {
width: 1500 px;
float: none;
list-style: none;
position: relative;
margin: 80px 0 0 10px;
text-align: left;
}
.tabs li {
float: left;
display: block;
}
.tabs input[type="radio"] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs label {
display: block;
padding: 14px 21px;
border-radius: 2px 2px 0 0;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
background: #8e44ad;
cursor: pointer;
position: relative;
top: 4px;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: #703688;
}
.tabs .tab-content {
z-index: 2;
display: none;
overflow: hidden;
width: 100%;
font-size: 17px;
line-height: 25px;
padding: 25px;
position: absolute;
top: 53px;
left: 0;
background: #612e76;
}
.tabs [id^="tab"]:checked + label {
top: 0;
padding-top: 17px;
background: #612e76;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
display: block;
}
p.link {
clear: both;
margin: 380px 0 0 15px;
}
p.link a {
text-transform: uppercase;
text-decoration: none;
display: inline-block;
color: #fff;
padding: 5px 10px;
margin: 0 5px;
background-color: #612e76;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
p.link a:hover {
background-color: #522764;
}