I am having different html page in every tab and i want the active tab active even after refresh using bootstrap if possible
<div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#TypeSettings">Type</a></li>
<li><a data-toggle="tab" href="#EvidenceSettings">Evidence</a></li>
<li><a data-toggle="tab" href="#OverallTypeSettings">Overall Type</a></li>
</ul>
<div class="tab-content">
<div id="TypeSettings" class="tab-pane fade in active">
<div ng-include src="'Templates/AdminSettings/TypeSettings.html'"></div>
</div>
<div id="EvidenceSettings" class="tab-pane fade">
<div ng-include src="'Templates/AdminSettings/EvidenceSettings.html'"></div>
</div>
<div id="OverallTypeSettings" class="tab-pane fade">
<div ng-include src="'Templates/AdminSettings/OverallTypeSettings.html'"></div>
</div>
</div>
If you want to remember last opened tab by user, then you have add some JS logic. You can store user last opened tab in a cookie for example.
Related
I have many tabs in my showDialog, when I set tab_2 as active, the content shows nothing which is strange.
<div class="portlet-body">
<div class="tabbable-blue" id="my_tabDialog" style="margin:0px;">
<ul class="nav nav-tabs nav-tabs-lg">
<li id="li_tab_1">
<a data-toggle="tab" href="#" data-target="#tab_1">
MyTab1
</a>
</li>
<li id="li_tab_2" class="active">
<a data-toggle="tab" href="#" data-target="#tab_2">
MyTab2
</a>
</li>
</ul>
<div class="tab-content">
<div id="tab_1" class="tab-pane fade meter-tabs-height">
<div ng-include="'mytab1.html'"></div>
</div>
<div id="tab_2" class="tab-pane fade in meter-tabs-height" active>
<div ng-include="'mytab2.html'"></div>
</div>
</div>
</div>
</div>
When I firstly come into the dialog, the dialog shows MyTab2 with no content at all.
However, when I click MyTab1 and then reclick MyTab2, the content appears.
How does this happen and how could I handle this problem?Thank you.
I have made a mistake in my code, just add class="active" could resolve it.
Replace
<div id="tab_2" class="tab-pane fade in meter-tabs-height" active>
<div ng-include="'mytab2.html'"></div>
</div>
with
<div id="tab_2" class="tab-pane fade in meter-tabs-height active">
<div ng-include="'mytab2.html'"></div>
</div>
I have some genres and relevant Tv shows. Do I necessarily need to convert nav pills into react router Link tags? Or I can use the following bootstrap navigation that is already set up to show the tab content. Would using the later be considered as a bad practice?
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-action-tab" data-toggle="pill" href="#v-pills-action" role="tab" aria-controls="v-pills-action" aria-selected="true">action</a>
<a class="nav-link" id="v-pills-comedy-tab" data-toggle="pill" href="#v-pills-comedy" role="tab" aria-controls="v-pills-comedy" aria-selected="false">comedy</a>
<a class="nav-link" id="v-pills-thrill-tab" data-toggle="pill" href="#v-pills-thrill" role="tab" aria-controls="v-pills-thrill" aria-selected="false">thrill</a>
<a class="nav-link" id="v-pills-horror-tab" data-toggle="pill" href="#v-pills-horror" role="tab" aria-controls="v-pills-horror" aria-selected="false">horror</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-action" role="tabpanel" aria-labelledby="v-pills-action-tab">...</div>
<div class="tab-pane fade" id="v-pills-comedy" role="tabpanel" aria-labelledby="v-pills-comedy-tab">...</div>
<div class="tab-pane fade" id="v-pills-thrill" role="tabpanel" aria-labelledby="v-pills-thrill-tab">...</div>
<div class="tab-pane fade" id="v-pills-horror" role="tabpanel" aria-labelledby="v-pills-horror-tab">...</div>
</div>
</div>
</div>
Usign AngularJS and bootsrap 3.I have 3 nav-tabs and with panels on them. How do i programatically prevent the tabs from changing to the next one if the user has not selected a customer or dvd's. On bot the customerSelect and dvdSelect tab's i have panel with a list where the user selects the customer anmd also a list of dvds.
<div class="row">
<div class="panel panel-default">
<ul class="nav nav-tabs">
<li class="active in"><a data-target="#customerSelect" data-toggle="tab">Customer</a></li>
<li><a data-target="#dvdSelect" data-toggle="tab">Dvd List</a></li>
<li><a data-target="#orderDetail" data-toggle="tab">Order Details</a></li>
</ul>
</div>
</div>
<div class="row">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="customerSelect">
</div>
</div>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade" id="dvdSelect">
</div>
</div>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade" id="orderDetail">
</div>
</div>
</div>
I have omitted much of the code within my tab content div's.
Using JQuery there are 4 different events for bootstrap tabs:
show.bs.tab // Occurs when the tab is about to be shown.
shown.bs.tab // Occurs when the tab is fully shown (after CSS transitions have completed)
hide.bs.tab // Occurs when the tab is about to be hidden
hidden.bs.tab // Occurs when the tab is fully hidden (after CSS transitions have completed)
A pseudo-example you could use:
$('.nav-tabs a').on('show.bs.tab', function(){
console.log('validation starts...');
if (correct!==true){
$('#tab1').tab('show');
}else{
$('#tab2').tab('show');
}
});
I'd like to have multiple instances of the same bootstrap tab markup in the DOM. Unfortunately it appears that bootstrap tabs mandate the use of IDs which means the same IDs conflict as IDs should by definition only occur once in the DOM tree.
Example, see jsfiddle, the bottom Foo Bar tabs end up controlling the top tab pane since I've added multiple elements to the DOM with the same ID.
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Foo</li>
<li role="presentation">Bar</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="foo">Foo content</div>
<div role="tabpanel" class="tab-pane" id="bar">Bar content</div>
</div>
</div>
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Foo</li>
<li role="presentation">Bar</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="foo">Foo content</div>
<div role="tabpanel" class="tab-pane" id="bar">Bar content</div>
</div>
</div>
As I'm using Angular, as with any template engine, I can differentiate the IDs in the template with a scope variable and ensure that variable is unique throughout my application. Example, using {{id}} as a suffix.
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Foo</li>
<li role="presentation">Bar</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="foo{{id}}">Foo content</div>
<div role="tabpanel" class="tab-pane" id="bar{{id}}">Bar content</div>
</div>
I'd like to know if there is a nicer way to solve this problem? Any way of configuring bootstrap to use class based selectors etc?
Check out the ui-bootstrap package. It makes dealing with tabs way easier in Angular.
I am using Bootstrap and Angular and I have the following HTML:
<ul class="nav nav-tabs">
<li class="active"><a data-target="#" data-toggle="tab">All</a></li>
<li><a data-target="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a data-target="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">Yeahhh, this is Tab 1.</div>
<div id="tab2" class="tab-pane active">Yup, yup, this is Tab 2.</div>
</div>
I want to visualize both #tab1 and #tab2 when the "All" tab is clicked. How do I achieve this with Bootstrap and Angular?
I found the solution in this answer.
<ul class="nav nav-tabs">
<li class="active"><a data-target=".tab-pane" data-toggle="tab">All</a></li>
<li><a data-target="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a data-target="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">Yeahhh, this is Tab 1.</div>
<div id="tab2" class="tab-pane active">Yup, yup, this is Tab 2.</div>
</div>
I just set the data-target of the "All" tab to a CSS class, that is present in all of my tabs. It doesn't have to be exactly 'tab-pane', you can use your own class - 'foo' or 'bar'. It's a nice and simple solution, as no external libraries are required to achieve this.