小贝子编程

如何使用"下一步"按钮或选项卡创建多个表，该选项卡指向另一个表单



我有一个我真的不知道如何处理的小问题，我创建了一个包含 3 个段的表单(给这些段类选项卡)，现在我想创建一个表单的下一个和上一个按钮，这将允许用户导航到tabs。但是默认情况下或在加载时，我只希望first Tab当前可见。

.col-lg-9 {
float: right;
margin-top: 0px;
padding: 0px;
}
.borderexample {
border-color: rgb(75, 218, 75);
border-style: solid;
border: 40px;
padding: 1rem;
}
body {
background-color: gray;
}
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-control {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-group {
margin-right: 20px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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>Hello, world!</title>
<link rel="stylesheet" href="3.css">
</head>
<body>
<form id="fillForm" action="#">
<div class="tab"><span class="info">Corporate Information: (fill appropriate box)</span>
<br /> <br />
<div class="form-group">
Company Name:
<input type="text" class="form-control" id="CName">
</div>
<div class="form-group">
<label for="Company_office_address">Company Office Address: </label>
<input type="text" class="form-control" id="Company_office_address">
</div>
<!--inline form starts here-->
<div class="form-inline">
<div class="form-group" id="form-inline">
<label for="town">Town:* </label>
<input type="text" class="form-control" id="Town" placeholder="Town">
</div>
<div class=" form-group" id="form-inline">
City:*
<input type="text" class="form-control" id="City" placeholder="City">
</div>
<div class="form-group" id="form-inline">
State:* <input type="text" class="form-control" id="State" placeholder="State">
</div>
<div class="form-group" id="form-inline">
Country:*
<input type="text" class="form-control" id="Country" placeholder="Country">
</div>
<div class="form-group" id="form-inline">
Incorporation Number:*
<input type="text" class="form-control" id="Inumber">
</div>
<div class="form-group" id="form-inline">
Date Incorporated:*
<input type="text" class="form-control" id="Dincorporated">
</div>
<div class="form-group" id="form-inline">
State of Incorporation:*
<input type="text" class="form-control" id="S_incorporation">
</div>
<div class="form-group" id="form-inline">
Country of Incorporated:*
<input type="text" class="form-control" id="C_incorporated">
</div>
<div class="form-group" id="form-inline">
Company Website:*<input type="text" class="form-control" id="C_website">
</div>
<div class="form-group" id="form-inline">
Company Email:*
<input type="email" class="form-control" id="C_email">
</div>
<div class="form-group" id="form-inline">
FAX (if applicable):*
<input type="text" class="form-control" id="Fax">
</div>
<div class="form-group" id="form-inline">
Company Phone Number:*
<input type="text" class="form-control" id="C_phone">
</div>
</div>
</div>
<div class="form-group">
Tax Identification Number (TIN):*
<input type="text" class="form-control" id="TIN">
</div>
<div class="form-inline">
<div class="form-group">
Occupation:
<input type="text" class="form-control" id="occupation">
</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<div class="form-group">
BVN:
<input type="text" class="form-control" id="bvn">
</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<div class="form-group">
Income Source:
<input type="text" class="form-control" id="incomeSource">
</div>
</div><br /> <br />
<div class="tab"><span class="info">Other Relevant Information</span>
<div class="form-group" id="form-inline">
<label for="RLA">Risk Location Address(Where applicable)</label>
<input type="text" class="form-control" id="RLA" placeholder="Risk Location">
</div>
<div class="form-group" id="form-inline">
<label for="RLA">Risk Location Address(Where applicable)</label>
<input type="text" class="form-control" id="RLA" placeholder="Risk Location">
</div>
<div class="form-group">
<label for="RLA">Risk Location Address(Where applicable)</label>
<input type="text" class="form-control" id="RLA" placeholder="Risk Location">
</div>
<div class="form-group">
<label for="RLA">Risk Location Address(Where applicable)</label>
<input type="text" class="form-control" id="RLA" placeholder="Risk Location">
</div>
<div class="form-group">
<label for="RLA">Risk Location Address(Where applicable)</label>
<input type="text" class="form-control" id="RLA" placeholder="Risk Location">
</div>
<div class="form-group">
<label for="RLA">Risk Location Address(Where applicable)</label>
<input type="text" class="form-control" id="RLA" placeholder="Risk Location">
</div>
</div>
</form>
</div><br /> <br />
<!--The second Tab Ends Here-->
<div class="tab"><span class="info">BROKER'S INFORMATION</span>
<div class="form-inline">
<div class="form-group">
Name: <input type="text" class="form-control" id="Brokers">
</div>
<div class="form-group">
NAICOM Reg. No.:<input type="text" class="form-control" id="Naicom">
</div>
</div>
<span class="broker"> (The Broker hereby certify that all the required documents as requested by law
collected from the Client)
</span>
<br /><br />
<div class="form-group">
Signature & Stamp/Seal of Broker
<input type="text" class="form-control" id="Signature">
</div>
</div>
<br /><br />
<!--the Brokers tab ends here-->
</form>
</div><br /><br />
<!--The first Tab ends here-->
</div>
<!--Container ends here-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>

您可以使用三个.html文件并将三个tabs中的每一个的代码粘贴到这三个文件中，然后您可以通过在下一个和上一个<button>上添加指向锚点标签<a>的链接来提供下一个和上一个tab文件的链接，如下所示;

普伦克

注意：我添加了外部IDE，因为无法在SO片段中创建三个.html文件。

更新：如果您不想制作三个文件并相互引用，则可以按如下方式使用JS;

tab = document.getElementsByClassName('tab')
btn = document.getElementsByClassName('btn1')
tab[1].style.display = 'none'
tab[2].style.display = 'none'
btn[0].classList.add("disabled")
function next() {
if (tab[0].style.display != 'none') {
tab[0].style.display = 'none'
tab[2].style.display = 'none'
tab[1].style.display = 'block'
btn[0].classList.remove("disabled")
}
else if(tab[1].style.display != 'none'){
tab[0].style.display = 'none'
tab[2].style.display = 'block'
tab[1].style.display = 'none'
btn[1].classList.add("disabled")        
}
}
function previous() {
if (tab[0].style.display != 'none') {

}
else if(tab[1].style.display != 'none'){
tab[0].style.display = 'block'
tab[2].style.display = 'none'
tab[1].style.display = 'none'
btn[0].classList.add("disabled")        
}
else{
tab[0].style.display = 'none'
tab[2].style.display = 'none'
tab[1].style.display = 'block'
btn[1].classList.remove("disabled")
}
}
// alert(tab[1].style.display)
.disabled{
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;}
.disabled:hover{
cursor: default;
}
.col-lg-9 {
float: right;
margin-top: 0px;
padding: 0px;
}
.borderexample {
border-color: rgb(75, 218, 75);
border-style: solid;
border: 40px;
padding: 1rem;
}
body {
background-color: gray;
}
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-control {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-group {
margin-right: 20px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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>Hello, world!</title>
<link rel="stylesheet" href="3.css">
</head>
<body>
<form id="fillForm" action="#">
<div class="tab"><span class="info">Corporate Information: (fill appropriate box)</span>
<br /> <br />
<div class="form-group">
Company Name:
<input type="text" class="form-control" id="CName">
</div>
<div class="form-group">
<label for="Company_office_address">Company Office Address: </label>
<input type="text" class="form-control" id="Company_office_address">
</div>
<!--inline form starts here-->
<div class="form-inline">
<div class="form-group" id="form-inline">
<label for="town">Town:* </label>
<input type="text" class="form-control" id="Town" placeholder="Town">
</div>
<div class=" form-group" id="form-inline">
City:*
<input type="text" class="form-control" id="City" placeholder="City">
</div>
<div class="form-group" id="form-inline">
State:* <input type="text" class="form-control" id="State" placeholder="State">
</div>
<div class="form-group" id="form-inline">
Country:*
<input type="text" class="form-control" id="Country" placeholder="Country">
</div>
<div class="form-group" id="form-inline">
Incorporation Number:*
<input type="text" class="form-control" id="Inumber">
</div>
<div class="form-group" id="form-inline">
Date Incorporated:*
<input type="text" class="form-control" id="Dincorporated">
</div>
<div class="form-group" id="form-inline">
State of Incorporation:*
<input type="text" class="form-control" id="S_incorporation">
</div>
<div class="form-group" id="form-inline">
Country of Incorporated:*
<input type="text" class="form-control" id="C_incorporated">
</div>
<div class="form-group" id="form-inline">
Company Website:*<input type="text" class="form-control" id="C_website">
</div>
<div class="form-group" id="form-inline">
Company Email:*
<input type="email" class="form-control" id="C_email">
</div>
<div class="form-group" id="form-inline">
FAX (if applicable):*
<input type="text" class="form-control" id="Fax">
</div>
<div class="form-group" id="form-inline">
Company Phone Number:*
<input type="text" class="form-control" id="C_phone">
</div>
</div>
<div class="form-group">
Tax Identification Number (TIN):*
<input type="text" class="form-control" id="TIN">
</div>
<div class="form-inline">
<div class="form-group">
Occupation:
<input type="text" class="form-control" id="occupation">
</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<div class="form-group">
BVN:
<input type="text" class="form-control" id="bvn">
</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<div class="form-group">
Income Source:
<input type="text" class="form-control" id="incomeSource">
</div>
</div><br /> <br />
</div>
<div class="tab"><span class="info">Other Relevant Information</span>
<div class="form-group" id="form-inline">
<label for="RLA">Risk Location Address(Where applicable)</label>
<input type="text" class="form-control" id="RLA" placeholder="Risk Location">
</div>
<div class="form-group" id="form-inline">
<label for="RLA">Risk Location Address(Where applicable)</label>
<input type="text" class="form-control" id="RLA" placeholder="Risk Location">
</div>
<div class="form-group">
<label for="RLA">Risk Location Address(Where applicable)</label>
<input type="text" class="form-control" id="RLA" placeholder="Risk Location">
</div>
<div class="form-group">
<label for="RLA">Risk Location Address(Where applicable)</label>
<input type="text" class="form-control" id="RLA" placeholder="Risk Location">
</div>
<div class="form-group">
<label for="RLA">Risk Location Address(Where applicable)</label>
<input type="text" class="form-control" id="RLA" placeholder="Risk Location">
</div>
<div class="form-group">
<label for="RLA">Risk Location Address(Where applicable)</label>
<input type="text" class="form-control" id="RLA" placeholder="Risk Location">
</div>
</div>
</form>
<div class="tab"><span class="info">BROKER'S INFORMATION</span>
<div class="form-inline">
<div class="form-group">
Name: <input type="text" class="form-control" id="Brokers">
</div>
<div class="form-group">
NAICOM Reg. No.:<input type="text" class="form-control" id="Naicom">
</div>
</div>
<span class="broker"> (The Broker hereby certify that all the required documents as requested by law
collected from the Client)
</span>
<br /><br />
<div class="form-group">
Signature & Stamp/Seal of Broker
<input type="text" class="form-control" id="Signature">
</div>
</div>
<button onclick="previous()" class="btn1">Previous</button>  <button onclick="next()" class="btn1">Next</button>
<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>
<script src="1.js"></script>
</body>
</html>

var currentTab = 0;
showTab(currentTab);
function showTab(n) {
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
fixStepIndicator(n)
}
function nextPrev(n) {
var x = document.getElementsByClassName("tab");
if (n == 1 && !validateForm()) return false;
x[currentTab].style.display = "none";
currentTab = currentTab + n;
if (currentTab >= x.length) {
document.getElementById("regForm").submit();
return false;
}
showTab(currentTab);
}

我认为类似的东西应该与我所期望的相似

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium