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.
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.
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 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 am using bootstrap with angularjs mainly because I want to user partials with my navbar
I have taken this template and added angularJS
http://ironsummitmedia.github.io/startbootstrap-landing-page/
Here is the navbar
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Inicio
</li>
<li>
Servicios
</li>
<li>
Contactenos
</li>
</ul>
</div>
And below that are the divs with the content of the navbar options
<a name="services"></a>
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Death to the Stock Photo:<br>Special Thanks</h2>
<p class="lead">A special thanks to <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a> for providing the photographs that you see in this template. Visit their website to become a member.</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="img/ipad.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
When I click on the Servicios (#services) is taking me to
http://localhost:8080/index.html#/services
instead of taking me to
http://localhost:8080/index.html#services
a / was added between # and services
I have nodejs installed and running http-server (npm pakckage) for testing purposes
I found the solution
When creating the links use two ## and the target="_self"
Question 1
Question 2
Question 3
And use the id attribute in your html elements like this:
<div id="faq-1">Section 1</div>
<div id="faq-2">Section 2 Content></div>
<div id="faq-3">Question 3</div>
There is no need to change any routing or anything else
I need a navigation menu for a page I'm making and I would like to change the active link when someone clicks on it. I already have styles on the active link but I dont know how to make it change. Having it change when someone hovers over it would also be great. Javascript is alright. Thank you.
Menu
<div class="row">
<div class="small-12 medium-12 large-3 columns">
<a class="logo" href="/">Saul Designs</a>
</div>
<div class="large-7 columns">
<nav class="main-nav show-for-large-up">
<ul>
<!-- below this is what i need to have change-->
<li><a class="active" href="#start">START</a></li>
<li>ABOUT</li>
<li><a href="#work" >WORK</a></li>
<li>CONTACT</li>
<!-- and above this -->
</ul>
</nav>
</div>
<div class="large-2 columns">
<div class="normal-button alternate show-for-large-up">
HIRE ME
</div>
</div>
</div>
You can use the anchor for styling stuff in css3. The Problem here is that you have to specify matching ids to every anchor you have.
So you have to write:
<li><a id="start" href="#start">START</a></li>
<li><a id="about" href="#about">ABOUT</a></li>
<li><a id="work" href="#work" >WORK</a></li>
<li><a id="contact" href="#contact">CONTACT</a></li>
Then you have to add 4 stylerules, too:
#start:target, #about:target, #work:target, #contact:target{
background:#555; /* or as you want... */
}
This way it should work without any additional javascript.
I don't like this way because you have to specify every id and you are polluting the css-space. But I don't know another way using only html and css.