我有一个页面，该页面使用选项卡根据您单击的选项卡可视化不同的 HTML 代码。 该代码是用 Javascript 编写的，没有库(如 JQuery)，并且可以在许多与 HTML 编程相关的网站中找到它。 在与选项卡关联的 HTML 代码中有一个表单，问题是该表单不起作用(如果我按“确定”按钮，则不会发生任何情况)。
<html>
<head>
<link href="css/graphtabs.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="tab">
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'ntr')">NTR</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'unity')">Unity</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'equa')">eQuA</a></li>
</ul>
<div id="ntr" class="tabcontent">
<font size="+1">Grafici</strong></font><br><br>
<form action="details2gio.php" method="get">
<input type="checkbox" name="Brokerage" value="yes"/> a
<input type="checkbox" name="Postemobile" value="yes"/> b
<input type="checkbox" name="Prepaid" value="yes"/> c
<input type="checkbox" name="PRE_BUS" value="yes"/> d
<input type="checkbox" name="Vpn" value="yes"/> e
<br>
Seleziona grafico: <select name="report">
<option value="numreg">Numero registrazioni (Paese)</option>
<option value="regperop">Registrazioni per operatore</option>
<option value="ulsuccessperop">UL Success per operatore</option>
<option value="tmedioperop">Tempo medio di registrazione per operatore</option>
<option value="firsttimesuccperop">Successo al primo tentativo per operatore</option>
</select>
<button name="ok" type="button">OK</button>
</form>
<div id="container_ntr" align="center" style="width: 1000px; height: 450px; margin: 0 auto"><img src="images/waiting.gif" alt="Waiting..." height="300" width="300"></div>
<br>
</div>
<div id="unity" class="tabcontent">
<font size="+1">Grafici UNITY per:<strong><?php echo " ".$country?></strong></font><br><br>
<form action="details2gio.php" method="get">
<input type="hidden" name="uid" value="<?php echo $_GET['uid']?>">
<input type="hidden" name="cc" value="<?php echo $_GET['cc']?>">
<br>
Seleziona grafico: <select name="report">
<option value="ulsuccperopunity" <?php if ($_GET['report']=='ulsuccperopunity') echo 'selected';?>>Ul Success per operatore</option>
<option value="tmediounity" <?php if ($_GET['report']=='tmediounity') echo 'selected';?>>Tempo medio di registrazione per operatore</option>
</select>
<button name="ok" type="button">OK</button>
</form>
<div id="container_unity" align="center" style="width: 1000px; height: 450px; margin: 0 auto"><img src="images/waiting.gif" alt="Waiting..." height="300" width="300"></div>
<br>
</div>
<div id="equa" class="tabcontent">
<h3>EQUA</h3>
<p>Here you have to put eQuA graphs.</p>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
------------------------------------------------------------------
CSS graphtabs.css
------------------------------------------------------------------
/* Style the list */
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
我搜索了与在 DIV 中使用 FORM 相关的问题，但没有找到任何内容。
最佳答案
尝试更换
<button name="ok" type="button">OK</button>
与
<input type="submit" value="Ok">
关于javascript - Javascript DIV 中的 FORM 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40906808/