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" );
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 2 lists of elements. When I click on an element of first list (it is a link), I basically need to add css class 'is-active' to that element AND to corresponding item from another list. I think they have to be in separate lists, as they are in two different bootstrap columns for mobile friendliness. I am currently styling elements from first list with:
$(document).ready(function(){
$('.tabs li').click(function(){
$(this).addClass('is-active');
$('.tabs li').not(this).removeClass('is-active');
});
})
Can't select elements from the other list though.. Any ideas how can I achieve this functionality with css, js/jquery?
My html structure currently is like this:
<div class="col-md-6">
<ul class="tabs">
<li class="tabs-title is-active">
title_1
</li>
<li class="tabs-title">
title_2
</li>
</ul>
</div>
<div class="col-md-6">
<div class="tabs-content">
<div class="tabs-panel is-active">
<div class="entry">
<p>content_1</p>
</div>
</div>
<div class="tabs-panel">
<div class="entry">
<p>content_2</p>
</div>
</div>
</div>
</div>
When I click on 2nd link from first column, the 2nd div from second column should get 'is-active' class. Is this possible?
I guess lists do not have corresponding elements right now. What do I need to have the items linked in some way?
Here's an example, since we don't know what your list looks like.
<ul class="tabs">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ul class="letters">
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ul>
Also, it's easier to remove all instances of the is-active class and then add it just to the target elements.
$(document).ready(function(){
$('.tabs li').click(function(){
var index = $('.tabs li').index(this);
$('.tabs li, .letters li').removeClass('is-active');
$(this).addClass('is-active');
$('.letters li').each(function(i) {
if (i == index)
$(this).addClass('is-active');
})
});
})
https://jsfiddle.net/fzeauw7a/
Here is the JS Fiddle of my existing tab build:
http://jsfiddle.net/getpresto/89ZAG/1/
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
What I need is the ability to add a far left button that will cycle the user to the next tab to the left and a far right button that will cycle the user to the right tab. If the user reaches either end and continues to click the same prev or next option then they will simply continue through to the other end of tabs. So if they are on tab 1 and click the left navigation button then they will go to tab 3 as an example.
How can I adjust this script to include this feature? Thank you for your time.
Basic steps for any version will be:
You need to get the current selected tab index,
alter it with +1 or -1 (depending on the button pressed),
then wrap the value based on the number of tabs,
then update the current tab.
If you can upgrade to JS 1.9.1 or higher something like this will work:
JSFiddle: http://jsfiddle.net/89ZAG/8/
$(document).ready(function () {
var selectTab = function (delta) {
//var index = $("#tabs .current").parent().index();
var index = $("#tabs").tabs('option', 'active');
var count = $("#tabs ul > li").length;
index += delta;
if (index < 0) {
index = count - 1;
}
if (index >= count) {
index = 0;
}
$('#tabs').tabs('option', 'active', index);
};
$("#tabs").tabs();
$('#prev').click(function () {
selectTab(-1);
});
$('#next').click(function () {
selectTab(1);
});
}); //end document ready
But the HTML also needs to be restructured to suit that later tabs requirements (the panel selectors are in the link href properties:
HTML:
<div id="tabs">
<ul class="tabs header">
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
</ul>
<div class="panes" id="tab1">
<!--Start Tab 1-->Tab 1 content.</div>
<div class="panes" id="tab2">
<!--End Tab 1 & Start Tab 2-->Tab 2 content.</div>
<div class="panes" id="tab3">
<!--End Tab 2 & Start Tab 3-->Tab 3 content.</div>
<!--End Tab 3-->
<!--End Panes-->
</div>
<input class="header" type="button" value="Prev" id="prev" />
<input class="header" type="button" value="Next" id="next" />
You will need to style the two buttons so they appear beside/over your tabs.
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);
});
});
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);
});