Menu
we having three tabs initially first tabs should enabled i's working fine. after click submit button second tab should be open but it's is not working.
<div class="page-content">
<div class="container-fluid">
<header class="section-header">
<div class="tbl">
<div class="tbl-row">
<div class="tbl-cell">
<h2>Company Registration Form</h2>
</div>
</div>
</div>
</header>
<section class="tabs-section">
<div class="tabs-section-nav tabs-section-nav-icons">
<div class="tbl">
<ul class="nav" role="tablist" id="myLinks">
<li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="font-icon font-icon-cogwheel"></i>
Company Registration Form
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu1" role="tab" data-toggle="tab">
<span class="nav-link-in">
<span class="glyphicon glyphicon-music"></span>
Company Social Network
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu2" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="fa fa-product-hunt"></i>
Company Reference
</span>
</a>
</li>
</ul>
</div>
</div><!--.tabs-section-nav-->
<div class="tab-content" id="myTabs">
<div role="tabpanel" class="tab-pane fade in active show" id="home">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu1">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu2">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
</div><!--.tab-content-->
</section>
</div>
</div>
Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#myTabs form").on('submit', function (e) {
e.preventDefault();
var linkHref = $(this).parents('.tab-pane').attr('id');
$('#myLinks li')
.find('a[href="#' + linkHref + '"]')
.parent()
.next()
.find('a').tab('show')
.attr('data-toggle', 'tab');
});
</script>
Pass the value
in this picture value pass to the linkHref but after click submit button hide the first tab but next tab is not opening ..
Second Image blank page
second screen shot blank page after enter submit button
Here you go with a solution https://jsfiddle.net/7baqxro0/1/
$("#myTabs form").on('submit', function (e) {
e.preventDefault();
var linkHref = $(this).parents('.tab-pane').attr('id');
$('#myLinks li a').removeClass('active');
$('#myLinks li')
.find('a[href="#' + linkHref + '"]')
.parent()
.next()
.find('a')
.tab('show')
.addClass('active')
.attr('data-toggle', 'tab');
$('a.nav-link').not('.active').css('pointer-events', 'none');
});
$('a.nav-link').not('.active').css('pointer-events', 'none');<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="page-content">
<div class="container-fluid">
<header class="section-header">
<div class="tbl">
<div class="tbl-row">
<div class="tbl-cell">
<h2>Company Registration Form</h2>
</div>
</div>
</div>
</header>
<section class="tabs-section">
<div class="tabs-section-nav tabs-section-nav-icons">
<div class="tbl">
<ul class="nav nav-tabs" role="tablist" id="myLinks">
<li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="font-icon font-icon-cogwheel"></i>
Company Registration Form
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu1" role="tab" data-toggle="tab">
<span class="nav-link-in">
<span class="glyphicon glyphicon-music"></span>
Company Social Network
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu2" role="tab" data-toggle="tab">
<span class="nav-link-in">
<i class="fa fa-product-hunt"></i>
Company Reference
</span>
</a>
</li>
</ul>
</div>
</div><!--.tabs-section-nav-->
<div class="tab-content" id="myTabs">
<div role="tabpanel" class="tab-pane fade in active show" id="home">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu1">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
<div role="tabpanel" class="tab-pane fade" id="menu2">
<form id="form" action="">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--.tab-pane-->
</div><!--.tab-content-->
</section>
</div>
</div>Please add your CSS to the code, intentionally I skipped it.
I've used CSS property pointer-events: none instead of disabled.
Hope this will help you.
191
working: https://jsfiddle.net/q6adcnLs/
id attribute.active class to .nav-link (which should be in the .nav-item)return true or return false instead of preventDefault()UPDATE:
disable other inactive tabs https://jsfiddle.net/q6adcnLs/1/
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With