I am using a bootstrap tabpanel like this:
<div class="row spiff_tabs_body">
<!-- Nav tabs -->
<ul class="nav nav-tabs spiff_tabs" role="tablist">
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
<div role="tabpanel" class="tab-pane" id="instantspiff"></div>
</div>
</div>
</div>
</div>
Using javascript I need to figure out which tab the user is on. I'm not really sure how to do this. I've read a lot about selecting the active tab, but I can't really find out how to check which tab the user has selected.
Updated:
I forgot to mention I need to be able to check in a conditional if statement which tab is selected and then do something based on which tab is active.
I need to do something like this:
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// here is the new selected tab id
var selectedTabId = e.target.id;
});
var id = $('.tab-content .active').attr('id');
if (id == "instantspiff") {
alert("instantspiff");
}
else {
alert("delayedspiff");
}
</script>
check this
var id = $('.tab-content .active').attr('id');
if(id == "delayedspiff") {
alert("delayedspiff");
}
else {
alert("instantspiff");
}
when they click on a tab add this
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// here is the new selected tab id
var selectedTabId = e.target.id;
});
Related
I'm trying to add a Bootstrap tab panel goes like this:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">First Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Second Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Third Panel</a>
</li>
</ul><!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="tabs-1" role="tabpanel">
<p>First Panel</p>
</div>
<div class="tab-pane" id="tabs-2" role="tabpanel">
<p>Second Panel</p>
</div>
<div class="tab-pane" id="tabs-3" role="tabpanel">
<p>Third Panel</p>
</div>
</div>
Now I need to give link to users to see the panes like this:
https://sitename.com/page#tabs-2
But this won't work because the tab-pane with an id of tabs-2 does not have the .active class.
However, if I try loading https://sitename.com/page#tabs-1 The page properly redirects me to tab-pane with an id of tabs-1 (because it has .active class by default)
So how can I redirect users to different tab panes correctly?
You don't really need to check the fragment to switch between those tabs.
1) Import jQuery from here or:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
2) Add this part to your code.
<script>
$(document).ready(function () {
$('.nav-tabs a').click(function () {
$(this).tab('show');
});
});
</script>
I already started answering your old question before you deleted it, but here is it again.
I didn't understood what you were trying to achieve, so I just looked into the code and made my version, its not the best but it works.
This is an onClick event handler, it gets executed on a click in your nav and changes the active classes.
// onClick event handler, gets executed on click
$(".nav-link").on("click", (e) => {
// store clicked element
const listItem = e.target;
// get hash
const hash = e.target.hash;
// remove all active classes
$(".nav-link, .tab-pane").removeClass("active");
// add active class to list item and tab panes
$(listItem).add(hash).addClass("active");
});
This part gets executed when you reload your page. You need to change your HTML for this to work, so remove the active class from nav-link and give every link an additional class (tabs-1, tabs-2 and tabs-3).
// when page is reloaded
$(document).ready(() => {
// get current hash
const hashList = window.location.hash;
const hashItems = hashList.slice(1);
// remove all active classes
$(".nav-link, .tab-pane").removeClass("active");
// add active class to nav-link and pane
$(hashList).add(`.${hashItems}`).addClass("active");
});
Both snippets need to be included in your script tag of course, also you need to import jQuery, if not already happened.
I have a service page that using bootstrap 4's pills .nav-pills navigation (this is not the main navigation navbar), which is working very well. My challenge is that i want to be able to click on a link on the home page that should open the targeted tab-panel on the service page. Haven't been able to find a way for almost a week now. How can i achieve this?
Service.html
<div class="nav flex-column nav-pills col-md-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<ul class="list-group list-unstyled">
<li class="nav-item">
<a class="nav-link list-group-item" id="v-pills-manpower-tab" data-toggle="pill" href="#v-pills-manpower" role="tab" aria-controls="v-pills-manpower" aria-selected="false">Manpower Supply</a>
</li>
</ul>
</div>
<div class="tab-content col-md-8" id="v-pills-tabContent">
<div class="tab-pane fade" id="v-pills-manpower" role="tabpanel" aria-labelledby="v-pills-manpower-tab">
<h5>Man Power Supply</h5>
</div>
Home.html
<a href="services.html#v-pills-manpower" data-toggle="tab" >
My code in home.html doesn't work but that's one of my many attempts.
On the home page, configure data attributes to help. I've added data-tab-name to the anchor and it defines the desired, selected tab for the service page.
When the page loads, it re-configures the onclick of the link so that the tab name can be stored in localStorage before redirecting the user to the service page.
Home.html
<a href="services.html" data-tab-name="v-pills-manpower" data-toggle="tab" >
<script type="text/javascript">
window.onload = function() {
document.querySelectorAll('[data-toggle="tab"]').forEach(function(item, index){
item.addEventListener('click', function(e){
e.preventDefault();
localStorage.selectedTabName = item.getAttribute('data-tab-name');
window.location.href = item.href;
});
});
};
</script>
When the service page loads, the javascript looks for the saved tab name in localStorage, identifies that tab and then makes it the active tab by applying the "active" class to the appropriate element.
Service.html
<script type="text/javascript">
window.onload = function() {
document.querySelectorAll('.nav-link').forEach(function(item, index){
var isActive = (item.className.indexOf('active')>-1);
if (item.id==localStorage.selectedTabName) {
if (!isActive) {
item.className += ' active';
}
item.setAttribute('aria-selected', 'true');
} else {
item.setAttribute('aria-selected', 'false');
if (isActive) {
item.className = item.className.replace('active', '');
}
}
});
};
</script>
I'm working on small mvc application, and on my view there is tab control which has 3 tabs, and depending on ViewBag value I need to open my third tab, here is image of a how my view looks:
So when View is loaded, I need to check for a value of my ViewBag and depending on that I need to open my TAB 3, so here is what I've tried:
<div class="" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
#if (ViewBag.SuccessBody == null)
{
<li role="presentation" class="active">
TAB 1
</li>
<li role="presentation" class="">
TAB 2
</li>
<li role="presentation" class="">
TAB 3
</li>
}
else
{
<li role="presentation" class="">
TAB 1
</li>
<li role="presentation" class="">
TAB 2
</li>
<li role="presentation" class="active" onload="RedirectToTab();">
TAB 3
</li>
}
</ul>
As you can see guys depending on a value od ViewBag.SuccessBody I tried to load corresponding HTML, so if there is a value then I would load HTML which include TAB3 To own class="active" (please read code detailed).
But unfortunatelly with this approach, TAB3 becoming active but not also OPENED, so its content is not visible, it's being kept acctually on TAB1 while TAB3 looks like it's active, and that is bad :( .
So what I've done is :
I wrote javasscript method which should really open TAB3, but I couldn't know how to invoke it so I guess I could invoke it using onload method on my li element, so guys as you can see in code above I wrote on my li
onload="RedirectToTab();"
but unfortunatelly nothing happens..
And here is definition of my RedirectToTab javascript method:
function RedirectToTab() {
var customVal = $("#editViewBag").val();
if (customVal == 'True') {
$('#myTab a[href="#tab_content3"]').tab('show');
}
}
So guys one more time, how can I open TAB3 depending on a vaue of my ViewBag?
Thanks guys
Cheers
Just use the razor engine to output your ViewBag value in the javascript:
function RedirectToTab() {
var customVal = '#ViewBag.SuccessBody';
if (customVal == 'True') {
$('#myTab a[href="#tab_content3"]').tab('show');
}
}
Now you can call this from the doc ready:
$(document).ready(function () {
RedirectToTab();
});
You don't need to use JavaScript to open the tab. You can do it your Razor view which has the benefit of not seeing the active tab switch from 1 to 3 when the page loads. Here is a simple example with 3 tabs:
#{
string tab1 = null, tab2 = null, tab3 = null;
if (ViewBag.SuccessBody == null)
{
tab1 = "active";
}
else
{
tab3 = "active";
}
}
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="#tab1">Tab 1</li>
<li role="presentation" class="#tab2">Tab 2</li>
<li role="presentation" class="#tab3">Tab 3</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane #tab1" id="tab1">
tab 1
</div>
<div role="tabpanel" class="tab-pane #tab2" id="tab2">
tab 2
</div>
<div role="tabpanel" class="tab-pane #tab3" id="tab3">
tab 3
</div>
</div>
I am working on an application that loads a form inside of a bootstrap navtab. I have a datepicker that allows the user to enter a date click submit and update the data in the navtab. What I want to do is allow the user to select a date, and then when a tab is clicked it will use that date to display the data. As it is now, it will only work if the submit button is clicked. I know I need to change the code in my navtabs to match what I do when the button is clicked, but I'm not sure how to do it. Here is my navtabs:
<ul class="nav nav-tabs spiff_tabs" role="tablist">
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" id="details">
<div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
<div role="tabpanel" class="tab-pane" id="instantspiff"></div>
</div>
</div>
</div>
</div>
Here is the button click JavaScript:
<script>
$(".spiffdate-btn").click(function(){
var correctId = $("ul.spiff_tabs li.active a").attr('data-id');
var endDate = $("#startDate").val();
if (endDate == "") {
} else {
if (correctId == "delayedspiff")
{
FormGet('dashboard/delayedspiff?endDate=' + endDate, 'delayedspiff')
} else if (correctId = "instantspiff") {
FormGet('dashboard/instantspiff?endDate=' + endDate, 'delayedspiff')
}
}
});
</script>
How do I change the navtab Formget function to match that of the button clicks formget function?
Apply the spiffdate-btn class to your tab links so that they will also trigger the same function as your submit button without the onclick attribute. You could use a random css class that is more generically named and doesn't apply css to your elements.
I have implemented Navigation Tabs using Bootstrap. I am trying to get the width of a div when one particular tab becomes active. While the active tab is detected correctly, the width is returned 0. I'm not sure why this is happening.
Here is a fiddle: http://jsfiddle.net/pThn6/811/
HTML:
<ul class="nav nav-tabs">
<li>AAA</li>
<li class="active">BBB</li>
<li>CCC</li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">
<div class='col-md-9'>
...Content vol...
</div>
</div>
<div class="tab-pane active" id="bbb">
</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
JS:
$(function() {
$('a[data-toggle="tab"]').on('click', function(e) {
var s = "" + (e.target);
if(s.search('aaa') != -1) {
alert($('.col-md-9').css("width"));
}
});
})
How can I solve this?
timing issue, the tab hasn't opened yet so it hasn't resized the column, try this
http://jsfiddle.net/pThn6/812/
setTimeout(function() {
alert($('.col-md-9').width());
}, 100);
a better solution would be to hook into the open event provided by bootstrap, something like this
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var tab = "" + (e.target);
if(tab.search('aaa') != -1) {
alert($('.col-md-9').width());
}
});
fiddle: http://jsfiddle.net/pThn6/819/