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
Related
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.
So what I am trying to do is a form which is due to its length displayed over multiple pages. To realise this I am using different div's beeing displayed seperatly on one html page.
I am using angularJS and Bootstrap with this little piece of code:
It doesn't matter how I load this code. It's not working as first thing in a index.html file nor being loaded as a template with angularJS.
<div ng-controller="uploadCtrl">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="#part1">Start</a></li>
<li><a data-toggle="tab" data-target="#part2">Step 2</a></li>
<li><a data-toggle="tab" data-target="#part3">Finish</a></li>
</ul>
<div class="tab-content">
<div id="part1" class="tab-pane fade in active">
<h3>Form part 1</h3>
<p>Some content.</p>
</div>
<div id="part2" class="tab-pane fade">
<h3>Form part 2</h3>
<p>Some content in menu 1.</p>
</div>
<div id="part3" class="tab-pane fade">
<h3>Form part 3</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
My problem is I can only click once on the links in the nav. There seems to be a problem with the toggle-function of class="active". Clicking on a link adds the active-class but it is never removed.
After clicking on every link they all look like this: <li><a data-toggle="tab" data-target="#part1" class="active" aria-expanded="true">Form part 1</a></li>
Plus none of my <li> are of class="active" after the first link-selection.
I am only using
jquery.min.js
bootstrap.min.js
bootstrap.min.css
npm.min.js
angular.min.js
I strongly recommend you to use angular-ui bootstrap for this. It has a special case for nested forms. Using bootstrap.js over angular that already provides DOM manipulations is a bit redundant and can cause unexpected behaviour.
<form name="outerForm" class="tab-form-demo">
<uib-tabset active="activeForm">
<uib-tab index="0" heading="Form Tab">
<ng-form name="nestedForm">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" required ng-model="model.name"/>
</div>
</ng-form>
</uib-tab>
<uib-tab index="1" heading="Tab One">
Some Tab Content
</uib-tab>
<uib-tab index="2" heading="Tab Two">
More Tab Content
</uib-tab>
</uib-tabset>
</form>
More info here
There seems to be something wrong with my libraries.
I switched to Bootstrap Version 3.3.6 and it worked perfectly. Earlier I used the current Version 4.0.0 from Bootstraps Homepage given through the standard download option.
I got this code from the Bootswatch website, it supposed to work just fine :
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="">Profile</li>
<li class="">Other</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<p>Tab home!</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Tab Profile!</p>
</div>
<div class="tab-pane fade" id="other">
<p>Tab Other!</p>
</div>
</div>
But I'm using AngularJS routes, so the href links aren't working, I tried to replace href with data-target, but it doesn't work either. Please help, and is there a simple way to change the Tab class to active while active? Thank you.
You'll want to look into using Angular-UI for Bootstrap components like this. It gives you Bootstrap components like tabs that have been written specifically for AngularJS applications. Check out the "Tabs" section on that link.
I'm using the JavaScript Bootstrap 3 tabs as documented, like this:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
But with Angular, it's changing the URL to /#/profile for instance..
How can I prevent this?
Just put data-target instead of href attribute and it will work without changing urls.
At one point, if a link had the _target attribute set, angular wouldn't intercept those clicks. Perhaps that will work in this case?
I have tabs set up on my website and they all seem to be working fine except that the links inside the tabs do not work. It works if I right-click and say open in new tab, but otherwise nothing happens. I think the issue is with bootstrap.js and something that I'm doing, but I can't figure out what.
Here is the site: http://www.rightcall.co/features. Look at the links in the last 3 tabs
Here is a simple version of my code:
<div class="tabbable features tabs-left row-fluid">
<ul class="nav nav-tabs span3 uppercase">
<li class="active">Overview</li>
<li>What you get</li>
<li>Our Process</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="l1">
<h3>Overview</h3>
<a href="/anotherpage">
</div>
<div class="tab-pane" id="l2">
<h3>What You Get</h3>
<a href="/anotherpage">
</div>
<div class="tab-pane" id="l3">
<h3>Our Process</h3>
<a href="/anotherpage">
</div>
</div>
</div>
</div>
Thank you in advance for any advice you have. I'm pretty new to Bootstrap, so I'm kinda at a loss.
In your javascript you select all '.tabbable a''s with jquery and prevent the default click action:
$('.tabbable a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
You should make it:
$('.tabbable .nav-tabs a').click( //etc..
This way no other a's are selected by jQuery..
Also I should point out that linking your site in StackOverflow to let people look into your bug/problem is against the rules. Only post the code (HTML/CSS/JS) so that others finding the question can solve their problems with it too.