Menu
I have a problem using the bootstrap tabs in AngularJS.
<div class="tab-container">
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active cont" id="home">
<h3 class="hthin">Basic Tabs</h3>
<p>This is an example of tabs </p>
</div>
<div class="tab-pane cont" id="profile">
<h2>Typography</h2>
<p>This is just an example of content
</div>
<div class="tab-pane" id="messages">..sdfsdfsfsdf.
</div>
</div>
</div>
The problem is that when I select a tab for example Home or Profile, I am redirected to /home or /profile url instead of showing the content of the tab itself.
I have a feeling that this can be somehow acheived with a directive and prevent the redirect to the page home or profile, instead show the tab content.
935
bootstrap() Function in AngularJS is a functional component in the Core ng module which is used to start up an Angular application manually, it provides more control over the initialization of the application. Syntax: angular. bootstrap(element, [modules], [config]);
$uibmodal is a service to create modal windows. Uibmodal is the UI Bootstrap component written in AngularJS. It enables us to use Bootstrap in AngularJS. It provides directives for all bootstrap with some extra like, datepicker, timepicker etc.
The ng-app directive is a starting point of AngularJS Application. It initializes the AngularJS framework automatically. AngularJS framework will first check for ng-app directive in a HTML document after the entire document is loaded and if ng-app is found, it bootstraps itself and compiles the HTML template.
replace href with data-target.
<li class="active"><a data-target="#home" data-toggle="tab" >Home</a></li>
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
