i have 3 tabs place on my website
tab 1| tab 2 | tab 3
i am using jquery for the functionality of these tabs, however it is not working, the page shows only tab 1 details when i click on any other tab it doesn't get loaded
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$( ".tabs" ).tabs();
});
</script>
<div class="tabs" ">
<ul>
<li data-tab="tab 1" class="active" ga-action="tab 1 Tab" ga-label="">tab 1</li>
<li data-tab="tab 2" class="" ga-action="tab 2 Tab" ga-label="">tab 2</li>
<li data-tab='tab 3' class=''>tab 3</li>
</ul>
<div id="tab 1" class="tab active">
<p> Written Material one </p>
</div>
<div id="tab 2" class="tab">
<p> Written Material two </p>
</div>
<div id="tab 3" class="tab">
<p> Written Material three </p>
</div>
</div>
Can anyone tell me how can i make the tabs work
There are several errors in the code you've posted:
There's an orphaned double quote " in the top-level div. That's invalid HTML
Your <li>s don't include any buttons/links. The tabs widget expects to have an <a> element within the li, with which to take the user to the corresponding tab
Your content div's id attributes contain spaces. That's invalid HTML.
To fix these change:
<div class="tabs">
...
<li data-tab="tab-1" class="active" ga-action="tab 1 Tab" ga-label="">
tab 1
</li>
...
<div id="tab-1" class="tab active">
...
Here's a working fiddle example: http://jsfiddle.net/9uvmktb8/
That's all the apparent problems, if it's still not working I'd look for the problem in omitted code. Let me know if this isn't the functionality wanted (as the question is a little unclear)
Currently your are not telling your li elements where to go when clicked.
You can try the below code
<div class="tabs">
<ul>
<li class="active">tab 1</li>
<li class="">tab 2</li>
<li class=''>tab 3</li>
</ul>
<div id="tabs-1" class="tab active">
<p> Written Material one </p>
</div>
<div id="tabs-2" class="tab">
<p> Written Material two </p>
</div>
<div id="tabs-3" class="tab">
<p> Written Material three </p>
</div>
</div>
In the above code, with the help of a link we can tell that on click which tab to display.
Related
I'm trying to create a simple navbar at the right and pane on the left. Like they have showed in their documentation (section - Tabs on the right).
But the tabs are coming on the top only. Here's the JsFiddle demo
Am i doing anything wrong? Are tabs-right deprecated in new version of bootstrap?
The bootstrap version you are using is Bootstrap v3.3.5.
The documentation you are referring to is Bootstrap v2.0.0.
Use the right version as your code is right.
Snippet
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="tabbable tabs-right">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li class="">Section 2</li>
<li class="">Section 3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="rA">
<p>I'm in Section A.</p>
</div>
<div class="tab-pane" id="rB">
<p>Howdy, I'm in Section B.</p>
</div>
<div class="tab-pane" id="rC">
<p>What up girl, this is Section C.</p>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/b6zvmfmr/1/
I want bootstrap to show several elements inside tab header button, currently it breaks into multiple buttons...
Consider example jsFiddle:
<ul class="nav nav-tabs">
<li class="allmembers">
The first
tab
</li>
<li class="additional">
The second
tab
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
In example above it would show four tabs instead of two, but I need bootstrap to be able to render complex html, something like:
<ul class="nav nav-tabs">
<li class="all members">
<div>
Any type of content displayed inline here
The first
tab
</div>
</li>
<li class="additional">
<div>
Any type of content displayed inline here
The second
tab
</div>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
How can
You can use all inline elements inside a tab header, you just need to wrap them inside an anchor, like this:
<a href="#additional" data-toggle="tab">
The second <br/>
Any type of content displayed inline here <br/>
<span>Span</span>
</a>
The reason is that bootstrap style for panel header is placed on anchor, if you need more complex structures you might need to change bootstrap and place the styles on li instead.
your demo: http://jsfiddle.net/zd1368yu/3/
I have been driving myself mad over getting ScrollSpy working. I have a menu that remains in a fixed, left position as the user scrolls down after a certain point, however, ScrollSpy refuses to work in any shape or form. I have tried a multitude of methods to get it working, as well as using a CMS (DotNetNuke) so please excuse some messy code here and there.
Here's the HTML of the nav:
<div role="complementary" class="bs-docs-sidebar hidden-print" id="sideNav">
<div class="sideNavCont">
<div>
<span class="sideMenuHeading">TITLE</span>
</div>
<div class="sideMenuGuideSep"></div>
<div class="sideMenu" id="navbar">
<ul class="nav nav-list affix sideMenuGuide">
<li>Option 1</li>
<li>Option 2 </li>
<li>Option 3 </li>
<li>Option 4 </li>
(and so on...)
</ul>
</div>
</div>
</div>
And here is the HTML for the content I want spied on:
<div id="content">
<span id="opt1">
<strong>Overview</strong>
</span>
<div>
<strong>
<span id="opt2" style="font-size: 32px;">TITLE</span>
</strong>
</div>
<p>
<span id="opt3" style="font-size: 32px;">
<strong>TITLE</strong>
</span>
</p>
</div>
Plus I have this piece of Jquery:
$('body').scrollspy({ target: '#content' });
Note that I also currently have working page anchors on each heading that work from linking from the nav.
I know the answer is probably staring me right in the face, but I'd appreciate your help. Thanks!
From the bootstrap doc, http://getbootstrap.com/javascript/#scrollspy.
"Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component."
So it should probably be initialized like this:
$('body').scrollspy({ target: '#sideNav' })
I'm new to Foundation 4 and am currently trying to do the following:
I'm using the section-container horizontal-nav and was wondering if anyone knows the configuration to get the section container to display its content first by default instead of hiding it until it's been clicked? So when the page loads, the section will be shown first until the user clicks on "Section 1".
<div class="section-container horizontal-nav" data-section="horizontal-nav">
<section>
<p class="title" data-section-title>
Section 1
</p>
<div class="content" data-section-content>
<ul class="side-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="divider"></li>
<li>Link 1</li>
</ul>
</div>
Tried adding active into the class attribute?
<div class="content active" data-section-content>
The section is placed as a horizontal nav-bar and I'd like for it to
be shown when the page loads as if the user has already clicked on it.
You can achieve this by giving you menu items an id and open that menu in jquery.
Section 1
then add this to the script section of your page:
$(function () {
$("#menu1").click();
});
I have an application which uses phonegap and jquery mobile and it has tabs like this
<div data-role="header">
<div data-role="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
</div>
<div data-role="content">
<div id="tab-1">
<h2>Here is the second tab</h2>
</div>
<div id="tab-2">
<h2>Here is the second tab</h2>
</div>
<div id="tab-3">
<h2>Here is the third tab</h2>
</div>
</div>
Now i need to do the following things
How to add a div dynamically to any of the tab?
How to show progress bar for about 10 seconds and then display the result.
You can dynamically add DOM elements with jQuery like this:
$('#container').append("<div></div>");
For jQuery-Mobile, you'd have to call refresh on any library specific constructs, such as listviews.