<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...
Related
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>
Using bootstrap 3 I am trying this exameple, using class="active" in the li element. Unfortunatelly when the page initially shows up neither tab pane is shown, the whole tab content is empty. The tab navs displayed correctly and when I explicitly click on a tab, the correct pane show up.
What I am missing?
Thanks in advance.
<ul class="nav nav-tabs">
<li class="active">graduation</li>
<li>graduate</li>
<li>extension</li>
</ul>
<div class="tab-content" id="TabContent">
<div class="tab-pane fade" id="graduation">
<p>
anything
</p>
</div>
<div class="tab-pane fade" id="graduate">
<p>
graduate
</p>
</div>
<div class="tab-pane fade" id="extension">
<p>
extension
</p>
</div>
</div>
You also need to specify the active class on the default tab-pane (and for fading tabs you need to add the in class), thus you should change
<div class="tab-pane fade" id="graduation">
to
Bootstrap 3
<div class="tab-pane fade in active" id="graduation">
Bootstrap 4
<div class="tab-pane fade show active" id="graduation">
Bootstrap 4
<div class="tab-pane fade show active" id="graduation">
<div class="tab-pane fade" id="graduation">
Bootstrap 3
<div class="tab-pane fade in active" id="graduation">
<div class="tab-pane fade in" id="graduation">
In case someone was here looking for a solution for react-bootstrap (like I was). There's a defaultActiveKey attribute you can specify on the Tab component. Reference
I have problem with bootstrap nav-tabs. I have this code. When I click on company button it shows me text in company and text in pressroom. When I click on press room button it shows me text only in press room and when I click on contacts button it shows me text in press room and contacts.
Any idea how solve this problem?
Thanks
<div class="about_us_links">
<ul class="nav nav-tabs">
<li class="active">Company</li>
<li>Press Room</li>
<li>Contacts</li>
</ul>
</div>
<div class="tab-content">
<div id="company" class="tab-pane fade in active">aaa</div>
<div id="pressroom" class="tabe-pane">bbb</div>
<div id="contacts" class="tab-pane">ccc</div>
</div>
You have wrong class in pressroom div. it should be tab-pane instead of tabe-pane
<div id="pressroom" class="tab-pane">bbb</div>
Js Fiddle Demo
How to have one form one several Twitter Bootstrap tabs?
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Tab1
</li>
<li>
Tab2
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1">
<form id="personal-data" class="form-horizontal">
...
</div>
<div class="tab-pane" id="2">
<!-- form controls to be continued here -->
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
What's wrong of having one <form> that wraps everything up?
<form id="personal-data" class="form-horizontal" method="POST" action="#">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Tab1
</li>
<li>
Tab2
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="1">
...
</div>
<div class="tab-pane" id="2">
<!-- form controls to be continued here -->
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
</form>
are you submitting tab by tab or once on the last tab?
if one-by-one (for exemple, validation), simply use $.post to send data back and forward on-the-fly (in other words, make ajax calls).
I just bumped into the same problem, if you want to submit once in the last tab, I assume there's a button somewhere to move beetwen tabs. By default clicking those buttons will trigger the POST request. To prevent this add following line to your button click funciton:
event.preventDefault();
I have the tabs code working but on page load all the tabs are displayed... Once I click the second tab only that second tab's content is displayed. I click back to the first tab and only the first tab's content is displayed. Refresh the page and you see all the content on this first tab until you repeat the above steps. Any ideas what I am missing?
<ul id="tab" class="nav nav-tabs">
<li class="active">
firstab
</li>
<li class="">
secondtab
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="firsttab">
<p> Content of first tab </p>
</div>
<div class="tab-pane fade active in" id="secondtab">
<p> Content of second tab </p>
</div>
</div>
Both tabs can't have the class "active"