我正在做的是 - 我的index.php中有三个导航选项卡，两个导航选项卡可以通过单击直接访问，但是中间的一个选项卡如果不输入用于身份验证的用户 PIN。
我的问题是中间的“管理”选项卡仅在成功触发 Ajax 成功时显示一次。其他选项卡(客户、历史记录)也在管理中显示其选项卡内容-选项卡。
<强>1。每次通过 AJAX 成功验证 PIN 码时，如何显示/打开管理选项卡？
<强>2。如何防止“客户”和“历史记录”选项卡的内容出现在管理选项卡上？
这是我所做的代码，但遇到问题，我将不胜感激，提前谢谢您:)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Find Date and Time</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Open Nav-Tab</title>
</head>
<body>
<div class = "container">
<ul class = "nav nav-tabs">
<li class = "nav-item"><a href = "#customer" data-toggle = "tab" class = "nav-link active">Customer</a></li>
<li class = "nav-item"><a href = "#enterPinModal" data-toggle = "modal" class = "nav-link">Admin</a></li>
<li class = "nav-item"><a href = "#history" data-toggle = "tab"class = "nav-link">History</a></li>
</ul>
<div class = "tab-content">
<div class = "tab-pane container active" id = "customer">
<br><br>Show Customer Information
</div>
<div class = "tab-pane container" id = "admin">
<br><br>Show Enter Pin Modal first for authetication before showing Admin Information
</div>
<div class = "tab-pane container" id = "history">
<br><br>Show History here
</div>
</div>
<!-- ENTER PIN MODAL -->
<div class = "modal" id = "enterPinModal">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<h5 class = "modal-title">Security Confirmation</h5>
<button class = "close" data-dismiss = "modal">×</button>
</div>
<div class = "modal-body">
<label class = "font-weight-bold">PIN #:</label>
<input type = "password" maxlength = "6" id = "pin_no" class = "form-control" />
</div>
<div class = "modal-footer">
<button id = "submit_pin" class = "btn btn-success btn-sm">Submit</button>
<button class = "btn btn-danger btn-sm" data-dismiss = "modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Ajax
<script>
$("#submit_pin").click(function () {
var pin = $("#pin_no").val();
$.ajax({
url: "pin_verify.php",
type: "post",
data: {
pin_number: pin
},
success: function(data) {
$('#admin').show();
$('#enterPinModal').modal('hide');
}
});
});
</script>
PHP
<?php
$cn = mysqli_connect("localhost","root","","testdb");
$pin = $_POST['pin_number'];
$sql = "SELECT * FROM tblPin WHERE pin = '$pin'";
$result = mysqli_query($cn,$sql);
?>
最佳答案
只需 .show() 将显示该选项卡。您在ajax中显示管理选项卡的代码是错误的。
$('#admin').show();
关于javascript - 如何在 Ajax Jquery 中成功打开或显示导航选项卡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56166461/