主要問題是您對多個元素使用相同的 id，id應該是唯一的。我的建議是使用class并使選擇器“相對于”可見選項卡
const currentPage = $('.tabcontent:visible');
currentPage.find('.message').toggle(!hasInput); // for example
createSum何時調用每個函數 (和checkInput)有更多變化。
請查看下面的代碼，并指出是否有不明確或未按預期工作的地方。
function openPage(pageName, elmnt, color) {
// Hide all elements with class="tabcontent" by default */
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Remove the background color of all tablinks/buttons
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
// Show the specific tab content
document.getElementById(pageName).style.display = "block";
// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = color;
createSum();
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
var total;
function getRandom() {
return Math.ceil(Math.random() * 20);
}
function createSum() {
var randomNum1 = getRandom(),
randomNum2 = getRandom();
total = randomNum1 + randomNum2;
const currentPage = $('.tabcontent:visible');
currentPage.find(".question").text(randomNum1 + " + " + randomNum2 + "=");
currentPage.find(".question").val('');
currentPage.find('button[type=submit]').prop('disabled', true);
}
function checkInput() {
var input = $(this).val(),
slideSpeed = 200,
hasInput = !!input,
valid = hasInput && input == total;
const currentPage = $('.tabcontent:visible');
currentPage.find('.message').toggle(!hasInput);
currentPage.find('button[type=submit]').prop('disabled', !valid);
currentPage.find('.success').toggle(valid);
currentPage.find('.fail').toggle(hasInput && !valid);
}
$(document).ready(function() {
// On "reset button" click, generate new random sum
$('button[type=reset]').click(createSum);
// On user input, check value
$(".ans").keyup(checkInput);
});
body,
html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.success,
.fail {
display: none;
}
.message,
.success,
.fail {
margin-top: 10px;
margin-bottom: 10px;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
p {
display: inline;
margin-right: 5px;
}
input,
button {
font-family: 'Open Sans';
font-weight: lighter;
font-size: 12px;
}
input {
border: 1px solid #FFBBD7;
width: 30px;
height: 20px;
text-align: center;
}
button {
border: none;
border-radius: 1.5em;
color: #FFF;
background: #FFBBD7;
padding: 2.5px 10px;
width: 75px;
height: 30px;
cursor: pointer;
transition: background .5s ease-in-out;
}
button:hover:enabled {
background: #303030;
}
button:disabled {
opacity: .5;
cursor: default;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {
background-color: red;
}
#News {
background-color: green;
}
#Contact {
background-color: blue;
}
#About {
background-color: orange;
}
<title>captcha</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="captcha.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="News" class="tabcontent">
<h3>News</h3>
<form>
<p class="question"></p><input class="ans" type="text">
<div class="message">Please verify.</div>
<div class="success">Validation complete :)</div>
<div class="fail">Validation failed :(</div>
<button type="submit" value="submit">Submit</button>
<button type="reset" value="reset">Reset</button>
</form>
</div>
<div id="Contact" class="tabcontent">
<h3>Contact</h3>
<form>
<p class="question"></p><input class="ans" type="text">
<div class="message">Please verify.</div>
<div class="success">Validation complete :)</div>
<div class="fail">Validation failed :(</div>
<button type="submit" value="submit">Submit</button>
<button type="reset" value="reset">Reset</button>
</form>
</div>
<div id="About" class="tabcontent">
<h3>About</h3>
<p>Who we are and what we do.</p>
</div>
