I'm using JQuery tabs plugin and ajax json mvc to retrieve data inside these tabs.
Everything works ok with onclick events but I need to load content inside first tab as soon as page load.
Here's the code
<script>
$(function () {
$("#tabs").tabs();
// how to add onload event for Tab One GetTabData(id);
$(".tabLink").click(function (event) {
var id = $(this).parent().text();
GetTabData(id);
});
});
</script>
<div class="demo">
<div id="tabs">
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab three</li>
<li>Tab four</li>
</ul>
<div id="tab-1">
</div>
<div id="tab-2">
</div>
<div id="tab-3">
</div>
<div id="tab-4">
</div>
</div>
</div>
You can programatically click on the first one:
$(".tabLink").click(function (event) {
var id = $(this).parent().text();
GetTabData(id);
}).eq(0).click();
I need to load content inside first tab as soon as page load
Then load the content of the first tab on $(document).ready()
$(function(){
...your code...
//execute first
GetTabData(1);
});
Related
I want to create two tab switching independent to each other in one page. This code here only allows tab switching one at a time and the content of the other tab that is not active is hidden.
HTML:
//FIRST TAB
<ul id="tab">
<li>OPTION 1</li>
<li class="select">OPTION 2</li>
</ul>
<div class="content_wrap disnon">
<p>●●●●●111</p>
<p>●●●●●222</p>
</div>
<div class="content_wrap">
<p>●●●●●111</p>
<p>●●●●●222</p>
<p>●●●●●333</p>
</div>
//SECOND
<ul id="tab">
<li class="select">OPTION A</li>
<li>OPTION B</li>
</ul>
<div class="content_wrap">
<p>●●●●●AAA</p>
<p>●●●●●BBB</p>
<p>●●●●●CCC</p>
<p>●●●●●DDD</p>
</div>
<div class="content_wrap disnon">
<p>●●●●●AAA</p>
<p>●●●●●BBB</p>
</div>
JScript:
$(function() {
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").addClass('disnon');
$(".content_wrap").eq(num).removeClass('disnon');
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});
There are a few things to check here first.
Both of these tabs have the same id. ID's are supposed to be unique, say tab1 and tab2.
It would be better if you could show us the css of this file.
However if my assumption is correct that
tab1 -> click -> show tab1 content AND
tab2 -> click -> show tab2 content.
The code is as follows.
// USING EITHER HTML5 DATA TAGS OR INDIVIDUAL ID'S
<ul class="tab" data-tab="1"> ... </ul>
<ul class="tab" data-tab="2"> ... </ul>
<div id="tabContent1" class="tabContent"></div>
<div id="tabContent2" class="tabContent" style="display:none"></div>
// SET NOT TO DISPLAY WHEN FIRST ACTIVE
<script>
$('.tab').on('click',function() {
// SELECT CLICKED TAB'S DATA (ie 1 / 2) IN THIS CASE
var tab = $(this).data('tab');
// HIDE ALL OTHER tabContent
$('.tabContent').hide();
// SHOW ONE TAB
$('#tabContent' + tab).show();
});
This has been simplified to easily be expandable for more than one tab. Simply adding more uls & divs will easily create a tab switching layout.
I have following bootstrap tabs code which is working when I click on the tab but I want to open the tab when I click on a link which I have created using ul > li > a
but unfortunately it's not working. how can i do this?
html code:
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
Js Code:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Give your <ul> a class name, like alt-nav-tabs, and then copy the existing navigation JS code. It would look something like this:
HTML:
<!-- Add class to your <ul> element -->
<ul class="alt-nav-tabs">
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
JS:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
// Copied (modify class selector to match your <ul> class): Change hash for page-reload
$('.alt-nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Persistent tab visibility:
Based on the following comment, you have a tab that is showing no matter which tab is active...
one my give link I see that on a random tab a class called tab-visible
is added automatically.
To resolve this, you can use the following code to remove this class after the HTML loads:
<script>
$(document).ready(function() {
$('#tab-bem-estar-e-ambiente').removeClass('tab-visible');
});
</script>
Place this script in the <head> section, and you should be good to go!
Alternatively...
I noticed you tried to override the original tab-visible behavior. As it is now, the tab with the tab-visible class will never be visible, even when that tab is clicked on and active. If you never intend to use the tab-visible class on your tabs, you could just remove the style from the original CSS document here:
http://futura-dev.totalcommit.com/wp-content/themes/futura-child/style.css?ver=4.9.8
Find that CSS file in your hosted files, search for .tab-visible, and simply remove the class.
I have a web page with tabbed content. The information for each tab is pulled from a database. The tab only displays if content exists. The JS requires class="active" to be set on the first tab to allow it to load and also to change the colour of the tab to show it is the active tab.
The problem I have is that I don't know which tab will be first, as there may not be any information for the first tab, so it will not display and it will be tab 2 or 3 that will show first.
How can I say 'make this tab have class="active" if it is first'?
HTML:
<nav class="filters">
<ul class="tabs">
<li class="active">Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ul>
</nav>
<article class="tab-content has-aside wysiwyg active" id="uniquename-tab-1">
<h1>Content 1</h1>
</article>
<article class="tab-content has-aside wysiwyg" id="uniquename-tab-2">
<h1>Content 2</h1>
</article>
<article class="tab-content has-aside wysiwyg" id="uniquename-tab-3">
<h1>Content 3</h1>
</article>
JavaScript:
function tabs($container) {
$container.each(function() {
$('.tabs > li > a', $container).on('click', function(e) {
e.preventDefault();
var tab_id = $(this).attr('data-tab');
$('.tabs > li', $container).removeClass('active');
$('.tab-content', $container).removeClass('active');
$(this).parent().addClass('active');
$("#"+tab_id, $container).addClass('active');
});
});
}
$("ul.tabs li:eq(0)").addClass('active');
I suppose you are using Bootstrap. If so, I had a similar problem and added a call to the tab function, as stated in the usage section of their doc:
$(document).ready(function () {
$(".tabs a:first").tab('show');
}
I want to create functionality for save the current tab on postabck.
for this reason:
1) How to find out the id of current tab.
2) How can pass that id to hidden variable.
I am not using jquery tabs due to some issue. I am creating script using plain jquery script.
This is my JS
$(document).ready(function () {
$('ul.tabs').each(function () {
var $a, $c, $ = $(this).find('a');
$a = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
$a.addClass('active');
This is HTML for tabs
<div class="co">
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1"> Content 1 </div>
<div id="tabs-2"> Content 2 </div>
<div id="tabs-3"> Content 3 </div>
</div>
If you are using jQuery UI tabs, easiest way
As Docs getter of active JqueryUI tab is
var active = $(".tabs").tabs( "option", "active" );
I use jQuery, and I have multiple tabs, that look mostly different. There is a selectbox that's shared over all tabs and I basically want it to have the same values and selected value over all the different tabs, so if it's changed in one tab then it's also changed in the other tab.
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab-1">
Content 1
<select>
<option>op1</option>
<option>op2</option>
</select>
</div>
<div id="tab-2">
Content 2
<select>
<option>op1</option>
<option>op2</option>
</select>
</div>
</div>
And the tabs get selected by
$(document).ready(function(){
$("#tabs").tabs();
}
I want the first selectbox to be copied on the second tab, or be equal to the other selectbox at all times. Is there a clean way to do this (not copying on tab.change() or something), or maybe a wholly different approach to this?
I hope it works for you. The code is written in very hurry. sorry for inconvenience.
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab-1">
Content 1
<span id="fcont"><select><option>op1</option><option>op2</option></select></span>
</div>
<div id="tab-2">
Content 2
<span id="scont"></span>
</div>
</div>
And in jQuery
$(function()
{
var mysel= "";
$("#tabs").tabs();
$('#tab-1').click(function()
{
mysel = $("#scont").html();
if(mysel)
{
$("#fcont").html(mysel);
$("#scont").html("");
}
});
$('#tab-2').click(function()
{
mysel = $("#fcont").html();
$("#scont").html(mysel);
$("#fcont").html("");
});
});
Have you tried using .clone jQuery function.
$(SELECT).clone().append(NEWTAB_HTML);
In Detail.
$(function()
{
$("#tabs").tabs();
$('#tab-2').click(function()
{
var newSelect = $('#tab-1 select').clone().attr('id','new_id_value');
$(this).append(newSelect);
});
});