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
Related
I've been asked by a friend to create a website.
I've used bootstrap 3 as a framework for the website and have hit a bit of a stumbling block.
My friend wanted a tabbed section where the background image of the section changes depending on which tab is active. I've been able to make it work for just the tab-pane using css, but I need to be able to change the entire section background and not just the tab pane.
I think it will require some JavaScript, but unfortunately my skills in that area a still a bit too weak to know how to do this, and google has been about as helpful as a hole in the head.
below is the section of html that i need the background image to change with each tab
<section id="about" class="content-section text-center">
<div class="row">
<div class="tab-content vertical-center">
<div id="aboutus" class="tab-pane fade in active">
<h2>...</h2>
<p>...</p>
</div>
<div id="history" class="tab-pane fade">
<h2>...</h2>
<p>...</p>
</div>
<div id="chef" class="tab-pane fade">
<h2>...</h2>
<p>...</p>
</div>
</div>
</div>
</section>
<div class="row">
<div class="col-lg-12 nav-pills-bg">
<ul class="nav nav-pills nav-justified">
<li class="active">
<a data-toggle="pill" href="#aboutus">...</a>
</li>
<li>
<a data-toggle="pill" href="#history">...</a>
</li>
<li>
<a data-toggle="pill" href="#chef">...</a>
</li>
</ul>
</div>
</div>
Any help is appreciated
Put your separate css background images on these:
#aboutus {
background-image:.....
}
#history {
background-image:.....
}
#chef {
background-image:.....
}
I checked your code, all works fine and if you want change only contents background, Carol McKay wrote what you have to add in your code. You don't need in this case any javascript code.
I created small example with your code and bootsrap classes: jsfiddle-link
All gaps you can see depends bootstrap classes, for example, by default class .alert has:
.alert {
padding: 15px;
margin-bottom: 20px;
...
}
And one more example with content below pills and looks more familiar): jsfiddle-link2
I am using tab through jquery now I want to add nested tab in tabs. MY problem is when I click on nested tab it will hide main tab and no content will show onclick on nested tab
Here is my code:-
<div id="tabs-container" class="TabView" >
<ul class="tabs-menu">
<li class="current">Guest</li>
<li>Owner</li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<p>test></p>
<div id="subtab">
<ul class="tabs-menu">
<li>Me as Guest</li>
</ul>
<div id="subtab-1">test2</div>
</div>
</div>
Kindly advise me any solution.
Without seeing the jQuery part of the code nor the CSS we can only guess, anyway probably the problem is that you have to assign a different classname to the ul block in the nested tab. Like this:
<div id="tabs-container" class="TabView" >
<ul class="tabs-menu">
<li class="current">Guest</li>
<li>Owner</li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<p>test></p>
<div id="subtab">
<ul class="subtabs-menu">
<li>Me as Guest</li>
</ul>
<div id="subtab-1">test2</div>
</div>
</div>
I have some html that is rendered by Flask. I have three navigation tabs that the user can click on to see different panels. This is the relevant code:
<div class="tabbable">
<!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Pick Colors
</li>
<li>Add Text
</li>
<li>Add Logos
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="well">
<ul class="nav">
<li class="color-preview" title="White" style="background-color:#ffffff;"></li>
</ul>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="well">
<div class="input-append">
<input class="span2" id="text-string" type="text" placeholder="add text here...">
<button id="add-text" class="btn" title="Add text"><i class="icon-share-alt"></i>
</button>
<hr>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div id="avatarlist">
<img style="cursor:pointer;" class="img-polaroid" src="static/img/img1.png">
</div>
</div>
</div>
When I open the HTML file by itself, I can click on the different tabs and get the relevant tab-pane's to open up. When the page is rendered by Flask though, I'm unable to get the functionality to work. Clicking the tabs doesn't do anything. What am I doing wrong?
I understand Flask uses Jinja templates so I must not be understanding that properly, but I'm not sure how to fix it. Thanks in advance for your help.
I just fixed it. The issue was that
<li>Add Text
</li>
<li>Add Logos
Should've said data-toggle="tab" instead of tab#.
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"