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 Teambuilder

TeambuilderBuild a Metagame!

• Pokemon#3

  &nbsp&nbsp&nbspPokemon 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

  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspItem 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

  &nbsp&nbsp&nbsp&nbsp&nbspAbility 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

  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspMoves

  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;

}