I have this plunkr,
http://plnkr.co/edit/AEYQpvmjUR6DUq2jtYid?p=preview
Part of My html code:
<body ng-app="App" ng-controller="mainController">
<form name="myForm1" style="align-content:center;">
<div id="divTabs" >
<h4>CMA Analysis/Assessment</h4>
<ul class="nav nav-tabs" id="tabs" style="border-bottom: none;">
<li class="active">
<a data-toggle="tab" href="#AwarenessMenu">Awareness</a>
</li>
<li>
<a data-toggle="tab" href="#UnderstandingMenu">Understanding</a>
</li>
<li>
<a data-toggle="tab" href="#AcceptanceMenu">Acceptance</a>
</li>
<li>
<a data-toggle="tab" href="#CommitmentMenu">Commitment</a>
</li>
<li>
<a data-toggle="tab" href="#AdvocacyMenu">Advocacy</a>
</li>
<li class="next-tab">
Next >
</li>
</ul>
</div>
<div id="divAlltabContent" class="tab-content" >
<div id="AwarenessMenu" class="tab-pane fade in active">
AwarenessMenu
</div>
<div id="UnderstandingMenu" class="tab-pane fade in active">
UnderstandingMenu
</div>
<div id="AcceptanceMenu" class="tab-pane fade in active">
AcceptanceMenu
</div>
<div id="CommitmentMenu" class="tab-pane fade in active">
CommitmentMenu
</div>
<div id="AdvocacyMenu" class="tab-pane fade in active">
AdvocacyMenu
</div>
</div>
</form>
</body>
Problem is that in my application I am able to click next button to navigate the tabs but when I click on the "tab" e.g Understanding, screen goes blank.
How it runs on my application:
I can click on CMA tab. On click, the Awareness, understanding, acceptance ... tabs are shown. By default only Awareness's contents are shown (but not in plunkr, not sure why, it is showing everything).
On click on next I can navigate the tabs without any page refresh (cannot navigate in plunkr :/)
Real question:
I need to be able to click on any tab to show the content of the clicked tab. Next button should also work.
Would appreciate a lot for help on this.
I added the full js in plunkr instead of references because it wasn't working properly.
You need to change
href="#AwarenessMenu"
to
data-target="#AwarenessMenu"
You have to understand the route,when,ng-view for doing this.
Related
How can i open Order tab using java-script function and also assign active class to the opened tab.
I have tried the below code but it didn't work.
<script>
function showmodal() {
$('#Order').modal('toggle').addClass('active');
}
</script>
-
<ul class="nav nav-tabs" id="myTab">
<li class="active">Active Customer</li>
<li>
<asp:LinkButton OnClientClick="showmodal()" ID="LinkButton1" runat="server">Order</asp:LinkButton></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
home
</div>
<div class="tab-pane" id="Order">
<div class="row">
<div class="col-md-12">
Order
</div>
</div>
</div>
</div>
</div>
You usually open a tab by calling ...tab("show") on the tab's a element but since you don't seem to have an a element for the Order tab, you'll have to add the active class to this tab yourself and remove it from the others.
Eg:
$("#Order").closest(".tab-content").find(".tab-pane").removeClass("active");
$("#Order").addClass("active");
You should take a look at the documentation to see how to properly use tabs.
My project is setup in this local link:
localhost:12345/index.html#/BookCollection
In this page there are 3 Tab components from Bootstrap. Recent, Past and UpComing
When I click on any of those Tabs I am taken back to:
localhost:12345/index.html#/
Whereas it was supposed to be:
localhost:12345/index.html#/BookCollection#Recent
The other two Tabs links are:
localhost:12345/index.html#/BookCollection#Past
localhost:12345/index.html#/BookCollection#UpComing
Please note that I am not allowed to change this Link Structure below:
localhost:12345/index.html#/BookCollection
This is the Bootstrap component I am using:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Recent">Recent</a></li>
<li><a data-toggle="tab" href="#Past">Past</a></li>
<li><a data-toggle="tab" href="#UpComing">UpComing</a></li>
</ul>
<div class="tab-content">
<div id="Recent" class="tab-pane fade in active">
<h3>Recent Books</h3>
<p>Some content.</p>
</div>
<div id="Past" class="tab-pane fade">
<h3>Past Books</h3>
<p>Some content in Past Books.</p>
</div>
<div id="UpComing" class="tab-pane fade">
<h3>UpComing books</h3>
<p>Some content in UpComing books.</p>
</div>
</div>
And I need the Tabs components from Bootstrap to work.
How do I fix it?
It seems that your code snippet works just fine. Perhaps you can explain a little bit more (and use a site like bootply since your localhost isn't reachable).
See your code snippet working here:
http://www.bootply.com/Ny6q4guDgk
i'm using bootstrap 3 nav-tabs like this
<ul class="nav nav-tabs pull-right projects" role="tablist" style="margin-top:20px;">
<li class="active"><a role="tab" data-toggle="tab" href="#progress">In Progress</a></li>
<li><a role="tab" data-toggle="tab" href="#done">Done</a></li>
</ul>
<div class="tab-content">
<div id="progress" class="tab-pane fade active in">
content for progress
</div>
<div id="done" class="tab-pane fade">
content for done
</div>
</div>
these are js files i've
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
when page loads tabs are working fine but when i click second tab and want to come back to first one that does not switch , whats wrong with my code here pleas help
switch the JavaScript files
Jquery to come first and then bootstrap
I have a Bootstrap 3 page that displays a set of tabs containing dropdowns. This looks great, but I would like to have one of the tabs be open by default when the page loads. Currently, the first tab option is set to "active", but the contents of that tab are not displayed.
How do I make the contents of a particular bootstrap dropdown choice display when the page is loaded?
Here's the code: fiddle
<ul class="nav nav-tabs">
<li class="dropdown active"> First Tab <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="firstTab">
<li class="active">
One
</li>
<li>
Two
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="one">Selected Tab: One (Should be open/active by default)</div>
<div class="tab-pane fade" id="two">Selected Tab: Two</div>
</div>
To solve your problem just give your first tab the class "tab-pane active" instead of "tab-pane fade" and you are good to go.
I am having trouble opening back up a specific tab after submitting a form. I am using Twitter Bootstrap 2.1.0. Basically, when the from is submitted, it will go back to the first tab instead of the tab where the form was submitted. Here is my code:
<ul class="nav nav-tabs" id="myTab">
<li class="active">Tab 1</li>
<li>Form Tab</li>
</ul>
<div class="tab-content">
<div class="tab-pane active fade in" id="tab1">
Content goes in here
</div>
<div class="tab-pane fade in" id="formtab">
<form action="http://myurl.com#formtab" class="center active" method="post">
form stuff goes in here
</form>
</div>
<div>
I figured that adding the #id at the end of the link would make the browser open up that specific tab but it goes back to the tab1 tab. Any help would be appreciated. Thanks