Menu
I made a moda dialogl and now am trying to insert tabs into it, but having trouble getting the tabs to display content. Partial code of the tabs:
http://plnkr.co/edit/eGRmkzDvo4lYGCjzA5q7
How do I place tab pages inside a modal?
743
To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content .
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling.
tab=x (where x=tab number) to the URL to display the specific tab. For example: https://demo.dj-extensions.com/dj-tabs/?tab=4 will open 4th tab on the demo site, you can try changing the number to another one to see how it works.
Answer: Use the HTML5 localStorage Object In Bootstrap, if you refresh the page the tab is reset to default setting. However, you can use the HTML5 localStorage object to save some parameter for the current tab locally in the browser and get it back to make the last active tab selected on page reload.
http://plnkr.co/edit/Oj681B1YbLU1dJEiWHZp?p=preview
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 ng-hide="newUser">Heading</h3>
</div>
<ul class="nav nav-tabs" id="tabContent">
<li class="active"><a href="#details" data-toggle="tab">Details</a></li>
<li><a href="#access-security" data-toggle="tab">Access / Security</a></li>
<li><a href="#networking" data-toggle="tab">Networking</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="details">
Details tab
<div class="control-group">
<label class="control-label">Instance Name</label>
</div>
</div>
<div class="tab-pane" id="access-security">
content 0
</div>
<div class="tab-pane" id="networking">
content 1
</div>
</div>
You are missing the data-toggle attribute:
<li><a href="#details" data-toggle="tab">Details</a></li>
And the active state for whatever tab you want to show up first:
<li class="active"><a href="#details" data-toggle="tab">Details</a></li>
<div class="tab-pane active" id="details">
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
