I have a html tabbed interface and I want to switch between different tabs based on the item selected in a Combobox using a function. I have tried different solution from previous related question on stackoverflow but none of them is working for me. Could someone please help me out on where I'm missing.
//code for tabs
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Bio Data</a></li>
<li><a data-toggle="tab" href="#menu1">Insurance Details</a></li>
<li><a data-toggle="tab" href="#menu2">Credit Card Details</a></li>
<li><a data-toggle="tab" href="#menu3">RTA</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<input name="surname" id="surname" type="text" /><br />
<input name="otherName" id="otherName" type="text" /><br />
</div>
<div id="menu1" class="tab-pane fade">
<label for="scheme">Scheme Name:</label>
<input name="scheme" id="scheme" type="text" /><br />
<label for="scheme_id">Scheme ID:</label>
<input name="scheme_id" id="scheme_id" type="text" /><br />
</div>
</div>
</div>
//script for switching tabs
<script type="text/javascript" >
function selectTab() {
$("#container").tab("option", "active", 2);
//$('#container a[href="#menu1"]')[2].click();
//$("#menu1").click();
}
</script>
I tried a number of options including the ones commented, but none worked. Please advise.
you can use like this
jQuery code
$('.cont').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
html code
<div class="container-fluid">
<ul class="nav nav-tabs" id="myTabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">This is the home pane...</div>
<div class="tab-pane" id="profile"></div>
<div class="tab-pane" id="messages"></div>
</div>
</div>
Related
I'm trying to click on a button tab and allow it to open up my content but it will not work. I seem to have the right code but it's still not working. I want it to be able to open my content once I click the button tab. This is really confusing I think I have tried everything
<%per_sel = "false"
job_sel = "false"
per_link = "nav-link"
job_link = "nav-link"
per_class = "tab-pane fade"
job_class = "tab-pane fade"
per_dis = " disabled"
job_dis = " disabled"
if app_pg >=5 then
per_sel = "true"
per_dis = ""
end if
if app_pg = 5 then
per_class = "tab-pane fade show active"
per_link = "nav-link active"
end if
if app_pg >=6 then
job_sel = "true"
job_dis = ""
end if
if app_pg = 6 then
job_class = "tab-pane fade show active"
job_link = "nav-link active"
end if%>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demographics</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/theme.css">
<script src="assets/js/bootstrap.bundle.min.js" defer></script>
</head>
<body class="d-flex flex-column vh-100">
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<button class="<%=per_link%>" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="<%=per_sel%>" <%=per_dis%>>Personal</button>
</li>
<li class="nav-item">
<button class="<%=job_link%>" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="<%=job_sel%>" <%=job_dis%>>Job</button>
</li>
</ul>
<div class="tab-content" id="appTabContent">
<div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
<form method="Post" name="applyForEmployment" action="applyForEmployment.asp" enctype="multipart/form-data">
<h2>Personal Information</h2>
<div class="row my-2 g-4">
<div class="col-12 col-md-5">
<label for="firstName" class="form-label">First Name</label>
<input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
</div>
<div class="col-12 col-md-5">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
</div>
</div>
</form>
</div>
<div class="<%=job_class%>" id="jobPanel" role="tabpanel" aria-
labelledby="job-tab">Job
</div>
<form method="Post" name="applyForEmployment" action="applyForEmployment.asp" enctype="multipart/form-data">
</form>
</div>
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>
I'm on the Job screen in the image below and click the personal but it stays on the job screen.
You HTML doesnt respect the correct structure for HTML file as following:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- YOUR CONTENT HERE -->
</body>
</html>
With bootstrap 5, your code seems to work perfectly if you put this
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
</li>
</ul>
<div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
<h2>Personal Information</h2>
<div class="row my-2 g-4">
<div class="col-12 col-md-5">
<label for="firstName" class="form-label">First Name</label>
<input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
</div>
<div class="col-12 col-md-5">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
</div>
</div>
</div>
into a <body> tag take a look at the correct structure for HTML document here
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
</li>
</ul>
<div class="tab-pane fade active show " id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
<h2>Personal Information</h2>
<div class="row my-2 g-4">
<div class="col-12 col-md-5">
<label for="firstName" class="form-label">First Name</label>
<input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
</div>
<div class="col-12 col-md-5">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
</div>
</div>
</div>
<div class="tab-pane fade" id="jobPanel" role="tabpanel" aria-labelledby="job-tab">
job
</div>
If you want to show specific tab on load, simply add active show classes to a tab-pane fade element.
<div class="tab-pane fade active show" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
And to be perfect you can add active class to nav-link element correponding to your tab-pane
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
EDIT: You must respect the bootstrap structure to get it working
Your .tap-pane MUST be children of .tab-content so you structure MUST look like that:
.tab-content > .tab-pane > form
OR
.tab-content > form.tab-pane
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
</li>
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
</li>
</ul>
<!-- tab-content PARENT OF .tab-pane -->
<div class="tab-content">
<!-- tab-pane CHILDREN OF .tab-content -->
<div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
<h2>Personal Information</h2>
<!-- form CHILDREN of .tab-pane -->
<form>Your form here</form>
</div>
<div class="tab-pane fade active show" id="jobPanel" role="tabpanel" aria-labelledby="job-tab">
<h2>Job</h2>
<form>Your form here</form>
</div>
</div>
I want to provide a link <a> from another page that opens my page containing these tabs to view contents of, say tab2 directly. I'm just using CSS script for making these tabs, no JS for them. I'm looking for something that can work like "mypage/#tab2". It is not working for now. Please suggest something. Do I need a js file to make it work?
<div class="tabset">
<!-- Tab 1 -->
<input type="radio" name="tabset" id="tab1" aria-controls="area1" checked>
<label for="tab1">Area 1</label>
<!-- Tab 2 -->
<input type="radio" name="tabset" id="tab2" aria-controls="area2">
<label for="tab2">Area 2</label>
<div class="tab-panels">
<section id="area1" class="tab-panel">
<h2>6A. Märzen</h2>
<p>Overall Impression: An elegant, malty German amber</p>
</section>
<section id="area2" class="tab-panel">
<h2>6B. Rauchbier</h2>
<p>Overall Impression: Toasty-rich malt in aroma and flavor.</p>
</section>
I was able to work it my way using nav-tabs. You can provide href tag to any tab that you want to link from outside with mypage/#tab-3, ie. it will link directly to contents of tab-3 panel.
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab-1">Tab 1</a></li>
<li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-2">Tab 2</a></li>
<li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-3">Tab 3</a></li>
<li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-4">Pillowcases</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="tab-1">
<p>Content for tab 1.</p>
</div>
<div class="tab-pane" role="tabpanel" id="tab-2">
<h5>section B test</h5>
</div>
<div class="tab-pane" role="tabpanel" id="tab-3">
<p>Content for tab 3.</p>
</div>
<div class="tab-pane" role="tabpanel" id="tab-4">
<p>Content for tab 4.</p>
</div>
</div>
Add this script at the bottom:
<script>
jQuery(document).ready(function ($) {
let selectedTab = window.location.hash;
$('.nav-link[href="' + selectedTab + '"]' ).trigger('click');
})
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Maybe you can add styles to it using css to modify the tab panel. This works fine but if anyone is good with css please add your code here to help us with the styling.
i want to try in my below code when i click on checkbox2 then nav tab show above the add new button.
but in my code right now tab is not show above the button when i click the colour checkbox
i try to this when i click on checkbox colour then nav tab is set or show above the add new button
plz check in my below code.
any help in this its very thankful
for refence link snapshots what i try to achieve https://www.kapwing.com/6048ac8969a2fc007f51ab42/studio/editor
i try to achieve when i click on checkbox1 then show add new button and then click checkbox2 its red green blue tab show on the place of of new button and new button is display down after the red green blue toggle
function addDay(e) {
document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}
.container-2{
display:flex}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<input class="mr-1" type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
<input class="mr-1" type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
<input class="mr-1" type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
<input class="mr-1" type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
<input class="mr-1" type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
<input class="mr-1" type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
<input class="mr-1" type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>
<div class="container-2">
<div class="row mr-2 ml-0" style="display:none;" id="lundi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#homemade">variant</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="homemade" class="container tab-pane active"><br>
<button type="button" class="btn btn-primary">ADD NEW</button>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mardi">
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Colors</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Red</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Green</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Blue</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>Red</h3>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Green</h3>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Blue</h3>
</div>
</div>
</div>
</div>
</div>
<div class="row mr-2 ml-0" style="display:none;" id="mercredi">test</div>
<div class="row mr-2 ml-0" style="display:none;" id="jeudi">Some content4</div>
<div class="row mr-2 ml-0" style="display:none;" id="vendredi">Some content5</div>
<div class="row mr-2 ml-0" style="display:none;" id="samedi">Some content6</div>
<div class="row mr-2 ml-0" style="display:none;" id="dimanche">Some content6</div>
</div>
i have this code and its working but not properly.
<div class="row">
<div class="col-4">
<strong>Ⅰ. Main A</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
<li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
<li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
</ul>
<strong>Ⅱ Main B</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
</ul>
</div>
<div class="col-8 border-left ">
<div class="tab-content ">
<div class="tab-pane scroll-able" id="item1">
<h3>A 1</h3>
</div>
<div class="tab-pane scroll-able" id="item2">
<h3>A 2</h3>
</div>
<div class="tab-pane scroll-able" id="item3">
<h3>A 3</h3>
</div>
<div class="tab-pane scroll-able" id="item4">
<h3>B 1</h3>
</div>
</div>
</div>
when i click each once its showing the content correctly
but its not working properly and leaving the active and show class when i click on different submenu (ex. B1 and A3 back-and-forth )
my data is dynamic.
I've played a bit and noticed what you reported, then I went to Bootstrap source which tells it is a BS limitation (see show method).
Then the simple options I see are basically 2:
Handle the tabs clicks manually: https://getbootstrap.com/docs/4.0/components/navs/#via-javascript
Working example: https://codepen.io/cdtapay/pen/bzegNB
Not being semantic and keeping all of the links in the same list (ul), including the section labels. Working example: https://codepen.io/cdtapay/pen/QYNRwb
Hope it helps.
UPDATE
: There is an issue reported about the show class being leaked: https://github.com/twbs/bootstrap/issues/28118
I have tested it on codepen, and it works like a charm, the active class is removed when clicking another toggle.
https://codepen.io/fazlurr/pen/QYNPBe
<div class="row">
<div class="col-4">
<strong>Ⅰ. Main A</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item1">A 1</a></li>
<li class=""><a class="" data-toggle="tab" href="#item2">A 2</a></li>
<li class=""><a class="" data-toggle="tab" href="#item3">A 3</a></li>
</ul>
<strong>Ⅱ Main B</strong>
<ul class="nav flex-column list-style">
<li class=""><a class="" data-toggle="tab" href="#item4">B 1</a></li>
</ul>
</div>
<div class="col-8 border-left ">
<div class="tab-content ">
<div class="tab-pane scroll-able" id="item1">
<h3>A 1</h3>
</div>
<div class="tab-pane scroll-able" id="item2">
<h3>A 2</h3>
</div>
<div class="tab-pane scroll-able" id="item3">
<h3>A 3</h3>
</div>
<div class="tab-pane scroll-able" id="item4">
<h3>B 1</h3>
</div>
</div>
</div>
Maybe the way you generate the ids is not right.
I have bootstrap tabs and I wanted to change the form value according to which tabs is active is it possible to do so using jquery here is my javascript
$(document).ready(function() {
$('.tab').click(function() {
var value_ch = $('.tabe-pane.active').attr('id');
$('#valuechange').val(value_ch);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" id='ma' href="#ma"><i class="fa fa-mobile"></i> Home</a></li>
<li><a data-toggle="tab" class='tab' href="#otc"><i class="fa fa-bank"></i> change test</a></li>
</ul>
<div class="tab-content">
<div id="ma" class="tab-pane fade in active">
<h3>First Value</h3>
</div>
<div id="otc" class="tab-pane fade">
<h3>Second tab</h3>
</div>
</div>
<input type="text" id="valuechange" value="" />
Can any one help me out as of when i CLICK THE VALUE of the input field is not changing
There is a few things wrong.
You use id="ma" 2 times, I removed from the one from li a
You use $('.tab') but nothing have the class tab
You have $('.tabe-pane.active') but should be $('.tab-pane.active')
$(document).ready(function() {
$('a[data-toggle="tab"]').click(function() {
var value_ch = $($(this).attr("href")).attr("id") // $('.tab-pane.active').attr('id');
$('#valuechange').val(value_ch);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#ma"><i class="fa fa-mobile"></i> Home</a></li>
<li><a data-toggle="tab" class='tab' href="#otc"><i class="fa fa-bank"></i> change test</a></li>
</ul>
<div class="tab-content">
<div id="ma" class="tab-pane fade in active">
<h3>First Value</h3>
</div>
<div id="otc" class="tab-pane fade">
<h3>Second tab</h3>
</div>
</div>
<input type="text" id="valuechange" value="" />
$(document).ready(function() {
$('a[data-toggle="tab"]').click(function() {
var value_ch = $('this').attr('href');
$('#valuechange').val(value_ch);
});
});
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" id='ma' href="#ma"><i class="fa fa-mobile"></i> Home</a></li>
<li><a data-toggle="tab" class='tab' href="#otc"><i class="fa fa-bank"></i> change test</a></li>
</ul>
<div class="tab-content">
<div id="ma" class="tab-pane fade in active">
<h3>First Value</h3>
</div>
<div id="otc" class="tab-pane fade">
<h3>Second tab</h3>
</div>
</div>
<input type="text" id="valuechange" value="" />