I'm trying to implement a html tabbed interface. For some reason clicking on a tab will kick me back to the homepage instead of showing a new list of data. Do I need to add a url route to the <a href> ?
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Overview</li>
<li role="presentation">Documents</li>
<li role="presentation">List</li>
</ul>
<div id="mainBody">
<div class="tab-content">
<div class="tab-pane active" id="overview">
<div role="tabpanel">
DATA 1
</div>
</div>
<div class="tab-pane" id="documents">
<div role="tabpanel">
DATA 2
</div>
</div>
<div class="tab-pane" id="punchlist">
<div role="tabpanel">
DATA 3
</div>
</div>
</div>
</div>
If you mean you are just trying to show the contents of the tab then I would change your href="#something" to href="javascript: return false;" or put the code in your event handler.
Tested this over on Bootply
http://www.bootply.com/DqUJfu6r4z
You simply need to close the quotations on your IDs:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Overview</li>
<li role="presentation">Documents</li>
<li role="presentation">List</li>
</ul>
<div id="mainBody">
<div class="tab-content">
<div class="tab-pane active" id="overview">
<div role="tabpanel">
DATA 1
</div>
</div>
<div class="tab-pane" id="documents">
<div role="tabpanel">
DATA 2
</div>
</div>
<div class="tab-pane" id="punchlist">
<div role="tabpanel">
DATA 3
</div>
</div>
</div>
</div>
Related
I'm trying to get two different cards to update their active tab-pane using one nav-link.
Here is my code. As you can see, I have one card that has act info and one that has the corresponding video in it. When I click to see the other act info, I want the video to also change (at the moment there is no second video - it just says 'stuff number 2'
<div class="row pt-5" id="acts">
<div class="col-md-4 offset-md-1">
<div class="card">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#act1" role="tab">Take Five</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#act2" role="tab">Thank You For Your Consideration</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="act1" role="tabpanel">
<div class="card-block">
<h3 class="card-title">Take Five</h3>
<p class="card-text">Do you also have trouble getting out of bed? Working 9 to 5, the same routine every day.. “Take Five” is about one of those days, a light hearted piece full of absurdness and acrobatics. People of all ages can enjoy the 7- minute act, let Ida surprise you!</p>
</div>
</div>
<div class="tab-pane" id="act2" role="tabpanel">
<div class="card-block">
<div class="container">
<div class="row">
<div class="col-md-9">
<h3 class="card-title">Thank You For Your Consideration</h3>
<p class="card-text">What do you write in a letter when you apply for a job? Everybody has been there, behind a computer screen, mind blank. It sounds too pretentious or too insecure. If only they would see the real you. But if that’s a good idea.. An act about struggles that everyone has experienced, brought with humour, brutal honesty and creativity in movement. Ida’s genuine story is a 6 minute text-based circus performance.</p>
</div>
<div class="col-md-3">
<img src="" alt="TYFYC" class="img-fluid img-rounded">
</div>
</div>j
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5 offset-md-2">
<div class="card">
<div class="tab-content">
<div class="tab-pane active" id="act1" role="tabpanel">
<div class="card-block">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/220114759" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="tab-pane" id="act2" role="tabpanel">
Stuff number 2
</div>
</div>
</div>
</div>
</div>
Is there a way to do this without using a javascript .addClass('active')?
I create a nav-tabs and works well, however on the page load all div appear.
When I click in any tab it works as it should.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#dados">Dados Cliente</a></li>
<li><a data-toggle="tab" href="#endereco">Endereço Cliente</a></li>
<li><a data-toggle="tab" href="#login">Login Cliente</a></li>
</ul>
<div class="tab-content">
<div id="dados" class="tab-pane fade in active">
<div class="form-group">
<label>Nome</label>
<h:inputText value="#{usuarioMB.cliente.nome}" styleClass="form-control" />
</div>
</div>
<div id="endereco" class="tab-pane fade in active">
</div>
<div id="login" class="tab-pane fade in active">
<div class="form-group">
<label>Email</label>
<h:inputText value="#{usuarioMB.usuario.email}"
styleClass="form-control" />
</div>
<div class="form-group">
<label>Senha</label>
<h:inputSecret styleClass="form-control"
value="#{usuarioMB.usuario.senha}" />
</div>
</div>
</div>
I've already tried to call the page passing #dados as parameter
criarusuario.xhtml?#dados
but it doesn't work too
That's because all your tab divs have classes tab-pane fade in active.
You should have one div with active state (tab-pane fade in active classes) and other divs should have only tab-pane fade classes.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#dados">Dados Cliente</a></li>
<li><a data-toggle="tab" href="#endereco">Endereço Cliente</a></li>
<li><a data-toggle="tab" href="#login">Login Cliente</a></li>
</ul>
<div class="tab-content">
<div id="dados" class="tab-pane fade in active">
<div class="form-group">
<label>Nome</label>
<h:inputText value="#{usuarioMB.cliente.nome}" styleClass="form-control" />
</div>
</div>
<div id="endereco" class="tab-pane fade">
</div>
<div id="login" class="tab-pane fade">
<div class="form-group">
<label>Email</label>
<h:inputText value="#{usuarioMB.usuario.email}" styleClass="form-control" />
</div>
<div class="form-group">
<label>Senha</label>
<h:inputSecret styleClass="form-control" value="#{usuarioMB.usuario.senha}" />
</div>
</div>
</div>
On initial load, the content from both tabs show on the webpage, once the tab is clicked for the first time they begin to work as expected.
Any ideas on why this is happening?
Here is my html
<div id="userFunctions" style="display: none;" >
<h2 id="welcome"></h2>
<button id="btnChangeUser" class="btn btn-primary" style="display: none;">Change User</button>
<br>
<hr>
<ul class="nav nav-tabs">
<li class="active"><a id="showSubs" data-toggle="tab" href="#subscriptionManagement">Subscription Portal</a></li>
<li><a id="showLocation" data-toggle="tab" href="#locationManagement">Location Management</a></li>
</ul>
<div class = tab-content>
<div id="subscriptionManagement" class="tab-pane fade in active">
<hr>
<section id="sendSubRequest">
<h4>Request Subscription</h4>
<div class="input-group">
<input type="text" id="subUserName" class="form-control "></input>
<span class="input-group-btn">
<button id="btnSubUser" class="btn btn-primary">Subscribe</button>
</span>
</div>
</section>
<br>
<section id="ReviewSubRequests">
<h4>Incoming Request(s)</h4>
<ul id='subscriptionsList'>
</ul>
</section>
</div>
<div id="locationManagement" class="tab-pane fade in active">
<hr>
<section id="cityDetails">
<section id="map">
</section>
<br>
<section>
<button id="btncheckInLocation" class="btn btn-primary">Check-In User location</button>
</section>
</section>
<section id="friendsList">
<h4>Subscribed Friends</h4>
<ul id='subscribedUsers'>
</ul>
</section>
</div>
</div>
</div>
Both your tabs (#subscriptionManagement and #locationManagement) have the active class, meaning they are both active by default. This class should be getting added on navigation, indicating that the content should be shown. You simply need to remove this class from the tab which you don't want to show on initial load:
Change:
<div id="locationManagement" class="tab-pane fade in active">
To:
<div id="locationManagement" class="tab-pane fade in">
Hope this helps! :)
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active">A</li>
<li class="nav">B</li>
<li class="nav">C</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">Content inside tab A</div>
<div class="tab-pane fade" id="B">Content inside tab B</div>
<div class="tab-pane fade" id="C">Content inside tab C</div>
</div>
Tab A is the default tab in most situations. But I want to visit tab B after this page loaded in certain conditions. Can I just visit the page via different URL with something like HTML anchor?
Thanks for any suggestions...
Im using a loop to render a <div> with tabs in it for each item in a list:
#foreach (var item in Model.things)
{
int counts = 1;
<div class="col-md-12">
<!-- BOX -->
<div class="box border red">
<div class="box-title">
<h4><i class="fa fa-columns"></i><span class="hidden-inline-mobile">#item.Name</span></h4>
</div>
<div class="box-body">
<div class="tabbable header-tabs">
<ul class="nav nav-tabs">
<li class=""><i class="fa fa-circle-o"></i> <span class="hidden-inline-mobile">More</span></li>
<li class=""><i class="fa fa-laptop"></i> <span class="hidden-inline-mobile">Profile</span></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="box_tab1">
<p>Content #1</p>
<p>...</p>
</div>
<div class="tab-pane fade" id="box_tab2">
<p>Content #2</p>
<p>...</p>
</div>
</div>
</div>
</div>
</div>
<!-- /BOX -->
</div>
}
The problem here is the harcoded values in for example:
<a href="#box_tab2> that "opens" the tab id="box_tab2".
Of course this does not work when there are several tabs with the same ids.
Can I maybe use an index in order to be able to assign unique values where needed?
You're on the right way using a counter/index, you have to use it to build your IDs, in your nav-tabs:
<li><a href='#String.Format("#box_tab1_{0}", count)'>
<li><a href='#String.Format("#box_tab2_{0}", count)'>
and in your tab-content:
<div class="tab-pane fade" id='#String.Format("box_tab1_{0}", count)'>
<div class="tab-pane fade" id='#String.Format("box_tab2_{0}", count++)'>
Note count++ to increment counter after last usage in each loop iteration.