0
这是我制作的网站，当我选择选项卡4（POKEMON＃4）时，它不会取消选择上一个选项卡，并且当我选择新选项卡选项卡4（POKEMON＃4）时，我最初选择的标签确实如此HTML选项卡支持
的Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BAM Teambuilder</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script type='text/javascript' src='js/importable.js'></script>
</head>
<body>
<h1>Teambuilder<span>Build a Metagame!</span></h1>
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab3" />
<label for="tab3">Pokemon#3</label>
<div id="tab-content3" class="tab-content">
<div>
<br>
<form action="#">
<p>
<table>
<tr>
<td>
<label class="label">   Pokemon</label>
<select id="bammon3">
<option>Please select a pokemon</option>
<option pokemon3=''>1) Simorgh</option>
<option pokemon3=''>2) --</option>
<option pokemon3=''>3) Flytrap</option>
<option pokemon3=''>4) Name Needed</option>
<option pokemon3=''>5) Pandoze </option>
<option pokemon3=''>6) Apaflite </option>
<option pokemon3=''>7) Dendurus</option>
<option pokemon3=''>8) Bandirto</option>
<option pokemon3=''>9) --</option>
<option pokemon3=''>10) Tiflectum</option>
<option pokemon3=''>11) Sinder</option>
<option pokemon3=''>12) --</option>
<option pokemon3=''>13) Springfest</option>
<option pokemon3=''>14) Mirrage</option>
<option pokemon3=''>15) Skulprit</option>
<option pokemon3=''>16) --</option>
<option pokemon3=''>17) --</option>
<option pokemon3=''>18) Swelter</option>
<option pokemon3=''>19) Tundear </option>
<option pokemon3=''>20) Slimurk </option>
<option pokemon3=''>21) Sluborac</option>
<option pokemon3=''>22) Ogre </option>
<option pokemon3=''>23) Name Needed</option>
<option pokemon3=''>24) Name Needed</option>
<option pokemon3=''>25) Cychill </option>
<option pokemon3=''>26) Cydnidie</option>
<option pokemon3=''>27) Name Needed</option>
<option pokemon3=''>28) Name Needed</option>
<option pokemon3=''>29) Name Needed </option>
<option pokemon3=''>30) Farenheat </option>
</select>
</td>
<td>
<label class="label">       Item</label>
<select id="Item3">
<option>Please select a Item</option>
<option item3=''>Apicot Berry</option>
<option item3=''>Aspear Berry</option>
<option item3=''>Bulletproof Vest</option>
<option item3=''>Assault Vest</option>
<option item3=''>Cheri Berry</option>
<option item3=''>Chesto Berry</option>
<option item3=''>Choice Band </option>
<option item3=''>Choice Jacket </option>
<option item3=''>Choice Scarf</option>
<option item3=''>Choice Specs</option>
<option item3=''>Choice Vest </option>
<option item3=''>Chumchu Berry </option>
<option item3=''>Clear Lense </option>
<option item3=''>Enchanted Gloves </option>
<option item3=''>Enchanted Slippers</option>
<option item3=''>Focus Lens</option>
<option item3=''>Ganlon Berry</option>
<option item3=''>Jakt Berry</option>
<option item3=''>Lai Berry</option>
<option item3=''>Leftovers</option>
<option item3=''>Leichi Berry</option>
<option item3=''>Lenses</option>
<option item3=''>Lum Berry</option>
<option item3=''>Mental Herb</option>
<option item3=''>Millstone</option>
<option item3=''>Music Box</option>
<option item3=''>Noni Berry</option>
<option item3=''>Pecha Berry</option>
<option item3=''>Petaya</option>
<option item3=''>Racing Shoes</option>
<option item3=''>Rasin Berry</option>
<option item3=''>Rawst Berry</option>
<option item3=''>Salac Berry</option>
<option item3=''>Simorgite</option>
<option item3=''>Flytrapite</option>
<option item3=''>Sitrus Berry</option>
<option item3=''>Traveller's Boots</option>
<option item3=''>Zeppelin</option>
</select>
</td>
<td>
<label class="label">     Ability</label>
<select id="Ability3">
<option>Please select a Ability</option>
<option ability3=''>Enchanted Ivy</option>
<option ability3=''>Planting Roots</option>
<option ability3=''>Amplify</option>
<option ability3=''>Berserk</option>
<option ability3=''>Dauntless</option>
<option ability3=''>Disruption</option>
<option ability3=''>Endurance</option>
<option ability3=''>Jagged Hide</option>
<option ability3=''>Kleptomaniac</option>
<option ability3=''>Mystic Mirror</option>
<option ability3=''>Mystic Veil</option>
<option ability3=''>Resolve</option>
<option ability3=''>Spook</option>
<option ability3=''>Pain Eater</option>
<option ability3=''>Specialist</option>
<option ability3=''>Quick Blows </option>
<option ability3=''>Troll</option>
<option ability3=''>Head Start</option>
<option ability3=''>Build Up</option>
<option ability3=''>Muddy Armor</option>
<option ability3=''>Tactician</option>
<option ability3=''>Forge</option>
<option ability3=''>Disruption</option>
<option ability3=''>Overdrive</option>
<option ability3=''>Tough Scales</option>
<option ability3=''>Relentless</option>
<option ability3=''>Fire Proof</option>
<option ability3=''>Freezing Point</option>
<option ability3=''>Boiling Point</option>
<option ability3=''>Strong Tail</option>
<option ability3=''>Upgraded </option>
<option ability3=''>Sharp Eye</option>
<option ability3=''>Mystic Veil</option>
<option ability3=''>Sharp Shooter</option>
<option ability3=''>Mastery</option>
<option ability3=''>Contamination</option>
<option ability3=''>Superweak Armor </option>
<option ability3=''>eutrality Barrier</option>
<option ability3=''>Juggernaut </option>
<option ability3=''>Immune Defense </option>
<option ability3=''>Feedbacy</option>
<option ability3=''>Ghoulify </option>
<option ability3=''>Super Slams</option>
</select>
</td>
<tr>
</tr>
<td>
<label class="label">       Moves</label>
<select id="Move9">
<option>Please select a Move</option>
<option>Move 1</option>
<option>Move 2</option>
</select>
<br>
<select id="Move10">
<option>Please select a Move</option>
<option>Move 1</option>
<option>Move 2</option>
</select>
<br>
<select id="Move11">
<option>Please select a Move</option>
<option>Move 1</option>
<option>Move 2</option>
</select>
<br>
<select id="Move12">
<option>Please select a Move</option>
<option>Move 1</option>
<option>Move 2</option>
</select>
</td>
</tr>
</form>
<tr>
First name:<br>
<input type="text" name="firstname">
</td>
</tr>
</table>
<form>
</div>
</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab4" />
<label for="tab4">Pokemon#4</label>
<div id="tab-content5" class="tab-content">
<div>
<br>
<form action="#">
<p>
<label class="label">Team Member #4</label>
<select class="turnintodropdown">
<option>Please select a pokemon</option>
<option pokemon4=''>1) Simorgh</option>
<option pokemon4=''>2) --</option>
<option pokemon4=''>3) Flytrap</option>
<option pokemon4=''>4) Name Needed</option>
<option pokemon4=''>5) Pandoze </option>
<option pokemon4=''>6) Apaflite </option>
<option pokemon4=''>7) Dendurus</option>
<option pokemon4=''>8) Bandirto</option>
<option pokemon4=''>9) --</option>
<option pokemon4=''>10) Tiflectum</option>
<option pokemon4=''>11) Sinder</option>
<option pokemon4=''>12) --</option>
<option pokemon4=''>13) Springfest</option>
<option pokemon4=''>14) Mirrage</option>
<option pokemon4=''>15) Skulprit</option>
<option pokemon4=''>16) --</option>
<option pokemon4=''>18) Swelter</option>
<option pokemon4=''>19) Tundear </option>
<option pokemon4=''>20) Slimurk </option>
<option pokemon4=''>21) Sluborac</option>
<option pokemon4=''>22) Ogre </option>
<option pokemon4=''>23) Name Needed</option>
<option pokemon4=''>24) Name Needed</option>
<option pokemon4=''>26) Cydnidie</option>
<option pokemon4=''>27) Name Needed</option>
<option pokemon4=''>28) Name Needed</option>
<option pokemon4=''>29) Name Needed </option>
<option pokemon4=''>30) Farenheat </option>
<option pokemon4=''>32) --</option>
<option pokemon4=''>33) Spychic </option>
<option pokemon4=''>34) Murdoom </option>
<option pokemon4=''>35) --</option>
<option pokemon4=''>37) Name Needed</option>
<option pokemon4=''>38) Name Needed </option>
<option pokemon4=''>39) Name Needed </option>
<option pokemon4=''>40) Name Needed </option>
<option pokemon4=''>41) Name Needed </option>
<option pokemon4=''>42) --</option>
<option pokemon4=''>43) --</option>
<option pokemon4=''>44) --</option>
<option pokemon4=''>45) --</option>
<option pokemon4=''>46) --</option>
<option pokemon4=''>47) --</option>
<option pokemon4=''>48) --</option>
<option pokemon4=''>49) --</option>
<option pokemon4=''>50) --</option>
<option pokemon4=''>51) Charidbyss </option>
<option pokemon4=''>52) --</option>
<option pokemon4=''>53) --</option>
<option pokemon4=''>55) Faeum </option>
<option pokemon4=''>56) Wyvearn</option>
<option pokemon4=''>57) --</option>
<option pokemon4=''>58) --</option>
<option pokemon4=''>59) --</option>
<option pokemon4=''>60) --</option>
</select>
</p>
</form>
</div>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab5" />
<label for="tab5">Pokemon#5</label>
<div id="tab-content5" class="tab-content">
<div>
<br>
<form action="#">
<p>
<label class="label">Team Member #5</label>
<select class="turnintodropdown">
<option>Please select a pokemon</option>
<option pokemon5=''>1) Simorgh</option>
<option pokemon5=''>2) --</option>
<option pokemon5=''>3) Flytrap</option>
<option pokemon5=''>4) Name Needed</option>
<option pokemon5=''>5) Pandoze </option>
<option pokemon5=''>6) Apaflite </option>
<option pokemon5=''>7) Dendurus</option>
<option pokemon5=''>8) Bandirto</option>
<option pokemon5=''>9) --</option>
<option pokemon5=''>10) Tiflectum</option>
<option pokemon5=''>11) Sinder</option>
<option pokemon5=''>12) --</option>
<option pokemon5=''>13) Springfest</option>
<option pokemon5=''>14) Mirrage</option>
<option pokemon5=''>15) Skulprit</option>
<option pokemon5=''>17) --</option>
<option pokemon5=''>18) Swelter</option>
<option pokemon5=''>19) Tundear </option>
<option pokemon5=''>20) Slimurk </option>
<option pokemon5=''>21) Sluborac</option>
<option pokemon5=''>22) Ogre </option>
<option pokemon5=''>23) Name Needed</option>
<option pokemon5=''>24) Name Needed</option>
<option pokemon5=''>25) Cychill </option>
<option pokemon5=''>27) Name Needed</option>
<option pokemon5=''>28) Name Needed</option>
<option pokemon5=''>29) Name Needed </option>
<option pokemon5=''>31) Celsice</option>
<option pokemon5=''>32) --</option>
<option pokemon5=''>33) Spychic </option>
<option pokemon5=''>34) Murdoom </option>
<option pokemon5=''>35) --</option>
<option pokemon5=''>36) Name Needed </option>
<option pokemon5=''>37) Name Needed</option>
<option pokemon5=''>38) Name Needed </option>
<option pokemon5=''>39) Name Needed </option>
<option pokemon5=''>40) Name Needed </option>
<option pokemon5=''>41) Name Needed </option>
<option pokemon5=''>42) --</option>
<option pokemon5=''>43) --</option>
<option pokemon5=''>44) --</option>
<option pokemon5=''>45) --</option>
<option pokemon5=''>46) --</option>
<option pokemon5=''>47) --</option>
<option pokemon5=''>48) --</option>
<option pokemon5=''>49) --</option>
<option pokemon5=''>50) --</option>
<option pokemon5=''>51) Charidbyss </option>
<option pokemon5=''>53) --</option>
<option pokemon5=''>54) --</option>
<option pokemon5=''>56) Wyvearn</option>
<option pokemon5=''>57) --</option>
<option pokemon5=''>58) --</option>
<option pokemon5=''>59) --</option>
<option pokemon5=''>60) --</option>
</select>
</p>
</form>
</div>
</div>
</li>
</ul>
<br style="clear: both;" />
</body>
</html>
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;
}
更严重的问题是，您能否缩小您的代码以适应您的特定问题？ – 2015-02-08 02:41:39
我删除了一些标签 – MickDom 2015-02-08 02:43:54