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>
Related
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#.
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
Code for multiple tabs on my page (displaying these tabs and content dynamically):
jQuery('.tab-block li a').click(function() {
var theitem = jQuery(this);
theitem.parent().parent().find("li").removeClass("active");
theitem.parent().addClass("active");
theitem.parent().parent().parent().parent().find(".tab-content > ul > li").removeClass("active");
theitem.parent().parent().parent().parent().find(".tab-content > ul > li").eq(theitem.parent().index()).addClass("active");
return false;
});
Code in my HTML to display tabs:
<div class="tab-block">
<div class="tabs">
<ul>
<li class="active">TAB 1</li>
<li>TAB 2</li>
</ul>
<div class="clear-float"></div>
</div>
<div class="tab-content">
<ul>
<li class="active">
<p><h3>Goole.com</h3></a>
<p>Content</p>
</li>
<li>
<p><h3>Goole.com</h3></a>
<p>Content</p>
</li>
</ul>
</div>
</div>
Now all tabs work great but no links will open (the H3 link within the tabs themselves). Any ideas what I'm doing wrong?
Thank you.
I don't know what your specific problem is, you may want to provide a link to a jsfiddle, to make yourself clear, but if you need tabs, try EZ tabs jQuery plugin.
HTML:
<div class="tab-block">
<div class="tabs">
<ul class='nav'>
<li>TAB 1</li>
<li>TAB 2</li>
</ul>
<div class="clear-float"></div>
</div>
<div class="tab-content">
<div class='box'>
<p>
<h3>Goole.com</h3>
</a>
<p>Content</p>
</div>
<div class='box'>
<p>
<h3>Goole.com</h3>
</a>
<p>Content</p>
</div>
</div>
</div>
jQuery, on document ready:
$('.tab-block').eztabs({
tabsList : 'ul.nav',
animation: 'slideLeftRight',
boxContainer: '.tab-content',
animationTime: 200
});
jsfiddle
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();
how to make the listview to allow selection of only one item.i used a list with < a href="#">, just to show what item is been selected. but i want,only one item in the list to be selected. It should not allow me to select another element. Can some help help me out with this
Something like this?
http://jsfiddle.net/SJ3GU/1/
Listview Docs: http://jquerymobile.com/demos/1.0a4.1/docs/lists/index.html
<div data-role="page" id="home">
<div data-role="content">
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
<li>Click for more info on the Acura</li>
</ul>
</div>
</div>
<div data-role="page" id="acura">
<div data-role="content">
<ul data-role="listview">
<li>Back Home</li>
</ul>
</div>
</div>