我一直在努力弄清楚如何选择收音机以显示在标题中。示例:假设我单击巴登-符腾堡州,如何让它在当前表示省的地方说巴登-符腾堡州?
此外,为了进一步前进,当您单击巴登-符腾堡州时,最好在移动到下一个框时将该联邦(省)内的地区作为下一个选项出现。示例:如果您想查找慕尼黑,您应该能够单击巴伐利亚州并转到下一个以慕尼黑为选项的框。
如果有人能分享他们的知识,我将不胜感激!
label {
display: inline-block;
color: black;
padding: 5px;
}
input[type="radio"] {
vertical-align: bottom;
}
.menu-container {
width:100%;
margin: 0 auto;
padding: 0 0;
}
.menu {
width:100%;
font-family: Verdana, Geneva, sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 15px;
position: relative;
padding: 0 0 0 4px;
margin: 0;
background-color: white;
}
.menu a, .menu a:link, .menu a:visited, .menu a:focus, span {
color: #23255e;
text-decoration: none;
}
.menu a:hover {
color: #23255e;
text-decoration: none;
}
.menu > li {
display: inline-block;
text-align: center;
margin-left: -15px;
border-left: 0px solid rgba(255, 255, 255, 0.11);
box-shadow: -0px 0 0 rgba(0, 0, 0, 0.1);
}
.menu > li > a {
padding:20px 140px;
display: block;
}
.menu > li:hover > a {
color: white;
}
.menu > li:hover {
background-color: #23255e;
}
/* Megadrop width dropdown */
.menu > li > .megadrop {
opacity: 0;
visibility: hidden;
position: absolute;
list-style: none;
top:53px;
left: 0px;
width: 70%;
min-height: 100px;
text-align: left;
margin-top:30px;
padding-left: 50px;
padding-top: 5px;
padding-bottom: 10px;
z-index: 99;
overflow: hidden;
border-left: 1px solid #23255e;
border-right: 1px solid #23255e;
border-bottom: 1px solid #23255e;
}
.menu > li:hover .megadrop {
opacity: 1;
visibility: visible;
margin-top: 0px;
}
.menu ul li:hover:after {
color: #23255e;
}
.menu .col {
width: 14.1%;
float: left;
color:white;
margin: 0 0 0 ;
}
.menu .col ul {
padding: 0;
margin: 0;
}
.menu .col ul li {
padding: 0;
list-style: none;
font-size: 11px;
}
.menu .col h3 {
font-size: 16px;
padding: 10px 0;
font-weight: bold;
margin: 5px 0 5px 0;
color: #23255e;
background: white;
}
.menu .col ul li a {
display: block;
padding: 0 0 15px 0;
color: #23255e;
}
.menu .col ul li a:hover {
color: #111;
text-decoration: none;
}
.menu > li > ul li ul, .menu li >ul li, .menu > li > .megadrop, .menu > li > ul, .menu > li {
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-outs;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="euprop.css">
</head>
<body>
<div>
<ul class="menu">
<li class="dropdown"><a href="#">Province</a>
<div class="megadrop">
<div class="col">
<h3>Independent Cities</h3>
<ul>
<li><label for="radio_1"><input type="radio" name="radio" id="radio_1" />Berlin</label>
</li>
<li><label for="radio_2"><input type="radio" name="radio" id="radio_2" />Bremen</label>
</li>
<li><label for="radio_3"><input type="radio" name="radio" id="radio_3" />Hamburg</label>
</li>
</ul>
</div>
<div class="col">
<h3>Provinces</h3>
<ul>
<li><label for="radio_4"><input type="radio" name="radio" id="radio_4" />Baden-Wurttemberg</label>
</li>
<li><label for="radio_5"><input type="radio" name="radio" id="radio_5" />Bavaria</label>
</li>
<li><label for="radio_6"><input type="radio" name="radio" id="radio_6" />Hesse</label>
</li>
<li><label for="radio_7"><input type="radio" name="radio" id="radio_7" />Mecklenburg</label>
</li>
<li><label for="radio_8"><input type="radio" name="radio" id="radio_8" />Lower Saxony</label>
</li>
<li><label for="radio_9"><input type="radio" name="radio" id="radio_9" />North Rhine-Westphalia</label>
</li>
</ul>
</div>
<div class="col">
<h3>Title</h3>
<ul>
<li><label for="radio_10"><input type="radio" name="radio" id="radio_10" />Rhineland-Palatinate</label>
</li>
<li><label for="radio_11"><input type="radio" name="radio" id="radio_11" />Saarland</label>
</li>
<li><label for="radio_12"><input type="radio" name="radio" id="radio_12" />Saxony</label>
</li>
<li><label for="radio_13"><input type="radio" name="radio" id="radio_13" />Saxony-Anhalt</label>
</li>
<li><label for="radio_14"><input type="radio" name="radio" id="radio_14" />Schleswig-Holstein</label>
</li>
<li><label for="radio_15"><input type="radio" name="radio" id="radio_15" />Thuringia</label>
</li>
</ul>
</div>
</div>
</li>
<li class="dropdown"> <a href="#" class="active">Region</a>
<div class="megadrop">
<div class="col">
<h3>Independent Cities</h3>
<ul>
<li><label for="radio_16"><input type="radio" name="radio" id="radio_16" />Baden-Baden</label>
</li>
<li><label for="radio_17"><input type="radio" name="radio" id="radio_17" />Freiburg</label>
</li>
<li><label for="radio_18"><input type="radio" name="radio" id="radio_18" />Heidelberg</label>
</li>
<li><label for="radio_19"><input type="radio" name="radio" id="radio_19" />Heilbronn</label>
</li>
<li><label for="radio_20"><input type="radio" name="radio" id="radio_20" />Karlsruhe</label>
</li>
<li><label for="radio_21"><input type="radio" name="radio" id="radio_21" />Mannheim</label>
</li>
</ul>
</div>
<div class="col">
<h3>Independent Cities</h3>
<ul>
<li><label for="radio_22"><input type="radio" name="radio" id="radio_22" />Pforzheim</label>
</li>
<li><label for="radio_23"><input type="radio" name="radio" id="radio_23" />Stuttgart</label>
</li>
<li><label for="radio_24"><input type="radio" name="radio" id="radio_24" />Ulm</label>
</ul>
</div>
<div class="col">
<h3>Regions</h3>
<ul>
<li><label for="radio_4"><input type="radio" name="radio" id="radio_4" />Freiburg</label>
</li>
<li><label for="radio_5"><input type="radio" name="radio" id="radio_5" />Karlsruhe</label>
</li>
<li><label for="radio_6"><input type="radio" name="radio" id="radio_6" />Stuttgart</label>
</li>
<li><label for="radio_7"><input type="radio" name="radio" id="radio_7" />Tubingen</label>
</li>
</ul>
</div>
</div>
</li>
<li class="dropdown"><a href="#">District</a>
<div class="megadrop">
<div class="col">
<h3>Independent Cities</h3>
<ul>
<li><label for="radio_1"><input type="radio" name="radio" id="radio_1" />Berlin</label>
</li>
<li><label for="radio_2"><input type="radio" name="radio" id="radio_2" />Bremen</label>
</li>
<li><label for="radio_3"><input type="radio" name="radio" id="radio_3" />Hamburg</label>
</li>
</ul>
</div>
<div class="col">
<h3>Provinces</h3>
<ul>
<li><label for="radio_4"><input type="radio" name="radio" id="radio_4" />Baden-Wurttemberg</label>
</li>
<li><label for="radio_5"><input type="radio" name="radio" id="radio_5" />Bavaria</label>
</li>
<li><label for="radio_6"><input type="radio" name="radio" id="radio_6" />Hesse</label>
</li>
<li><label for="radio_7"><input type="radio" name="radio" id="radio_7" />Mecklenburg</label>
</li>
<li><label for="radio_8"><input type="radio" name="radio" id="radio_8" />Lower Saxony</label>
</li>
<li><label for="radio_9"><input type="radio" name="radio" id="radio_9" />North Rhine-Westphalia</label>
</li>
</ul>
</div>
<div class="col">
<h3>Title</h3>
<ul>
<li><label for="radio_10"><input type="radio" name="radio" id="radio_10" />Rhineland-Palatinate</label>
</li>
<li><label for="radio_11"><input type="radio" name="radio" id="radio_11" />Saarland</label>
</li>
<li><label for="radio_12"><input type="radio" name="radio" id="radio_12" />Saxony</label>
</li>
<li><label for="radio_13"><input type="radio" name="radio" id="radio_13" />Saxony-Anhalt</label>
</li>
<li><label for="radio_14"><input type="radio" name="radio" id="radio_14" />Schleswig-Holstein</label>
</li>
<li><label for="radio_15"><input type="radio" name="radio" id="radio_15" />Thuringia</label>
</li>
</ul>
</div>
</div>
</li>
<li class="dropdown"><a href="#">Municapality</a>
<div class="megadrop">
<div class="col">
<h3>Title</h3>
<ul>
<li><a href="#">Sub-menu 1</a>
</li>
<li><a href="#">Sub-menu 2</a>
</li>
<li><a href="#">Sub-menu 3</a>
</li>
</ul>
</div>
<div class="col">
<h3>Title</h3>
<ul>
<li><a href="#">Sub-menu 1</a>
</li>
<li><a href="#">Sub-menu 2</a>
</li>
<li><a href="#">Sub-menu 3</a>
</li>
</ul>
</div>
<div class="col">
<h3>Title</h3>
<ul>
<li><a href="#">Sub-menu 1</a>
</li>
<li><a href="#">Sub-menu 2</a>
</li>
<li><a href="#">Sub-menu 3</a>
</li>
</ul>
</div>
<div class="col">
<h3>Title</h3>
<ul>
<li><a href="#">Sub-menu 1</a>
</li>
<li><a href="#">Sub-menu 2</a>
</li>
<li><a href="#">Sub-menu 3</a>
</li>
</ul>
</div>
</div>
</li>
</li>
</ul>
</div>
</body>
</html>
我不是专家,但我想说您可能需要在输入中添加一个"onclick="
和一个可能使用.innerHTML
将单选按钮中的值推送到标题中的函数,您的标题也需要一个 id,如下所示: <h3 id="provincesAnswer">Provinces</h3>
该函数需要考虑到所有无线电都指向标题,因此您可能需要内联(我相信其他人会有更简单的方法,但正如我所说,我不是专家)。
所以收音机可能看起来像:
<input type="radio" name="radio" id="radio_4" onclick="check(this.value)" value="Baden-Wurttemberg">Baden-Wurttemberg
所以为了简化我的意思这是脚本:
<script>
function check(provincesValue) {
document.getElementById("provincesAnswer").value=provincesValue;
}
</script>
和你的标题:
<h3 type="text" id="provincesAnswer">Provinces</h3>
和几个单选按钮,例如:
<li><label for="radio_4"><input type="radio" name="provincesValue" id="radio_4" onclick="check(this.value)" value="Baden-Wurttemberg" />Baden-Wurttemberg</label>
</li>
<li><label for="radio_5"><input type="radio" name="provincesValue" id="radio_5" onclick="check(this.value)" value="Bavaria" />Bavaria</label>
</li>
希望这有帮助