i want to run tabs within tabs. this is the first tab section which is running without problems.
<div id="tabs2" class="tabs">
<ul>
<li class="skew-25 active">
<a class="skew25" href="#"> 1 tab</a>
</li>
<li class="skew-25"></li>
<li class="skew-25"></li>
</ul>
<div class="tabs-pane">
<div class="tab-panel active" style="display: block;"> 1 tab output</div>
<div class="tab-panel" style="display: none;">2 tab output</div>
<div class="tab-panel" style="display: none;">3 tab output</div>
</div>
</div>
Now I include another tab within the sections (called 'tab output') of the above:
<div id="tabs4" class="tabs tabs-vertical">
<ul>
<li class="skew-25 active">tab within tab section</li>
<li class="skew-25">
<a class="skew25" href="#"></a>
</li>
<li class="skew-25"></li>
</ul>
<div class="tabs-pane">
<div class="tab-panel active" style="display: block;">content</div>
<div class="tab-panel" style="display: none;"></div>
<div class="tab-panel" style="display: none;"></div>
</div>
</div>
this second code i include in '1 tab output' '2 tab output' and '3 tab output'
Problem is they will ether not send output, not available to choose or not active when apply to a tab in first tab. How to fix this?
Javascripts are:
function(e) {
if (!$(this).parent().hasClass('active')) {
e.preventDefault();
var ind = $(this).parent().index();
tabsUl.find('li').removeClass('active');
$(this).parent().addClass('active');
tabsPane.find('.tab-panel').fadeOut(0).removeClass('active');
tabsPane.find('.tab-panel').eq(ind).fadeIn(350).addClass('active');
return false;
} else {
return false;
}
}
and
f = v.handle = function(e) {
return typeof x === i || e && x.event.triggered === e.type ? t : x.event.dispatch.apply(f.elem, arguments)
}
normal
/* ================ Tabs. ================ */
$.fn.tabs = function(options) {
var defaults = {
direction: ''
};
var options = $.extend({}, defaults, options);
if(options.direction == "vertical"){
$(this).addClass('tabs-vertical');
}
var tabsUl = $(this).find(' > ul'),
activeTab = tabsUl.find('li.active').index(),
tabsPane = $(this).find('.tabs-pane');
tabsPane.find('.tab-panel').fadeOut();
tabsPane.find('.tab-panel').eq(activeTab).fadeIn();
tabsUl.find('li').find('a').click(function(e){
if(!$(this).parent().hasClass('active')){
e.preventDefault();
var ind = $(this).parent().index();
tabsUl.find('li').removeClass('active');
$(this).parent().addClass('active');
tabsPane.find('.tab-panel').fadeOut(0).removeClass('active');
tabsPane.find('.tab-panel').eq(ind).fadeIn(350).addClass('active');
return false;
}else{
return false;
}
});
}
Disable the div and all its contents with jQuery like so:
How to disable all div content
Also, instead of all that js code you can use jQueryUI Tabs or Bootstrap tabs (also explained here scroll down to the Toggable Tabs section at the bottom of the page).
Related
I have a page with 6 bootstrap modals, each with a varying amount of tabs. I am unable to get the tab that corresponds with the tab id and url parameter to open. Link for reference. https://www.ryokuyou.co.jp/doujin/manual/printwords.html
As per the code below, I have tried writing a script to check the url parameter and see if it matches a tabs id. This does not work. I also tried opening a specified tab id, which meant the correct modal opened, but not the right tab. I have condensed the code below to minimise things. Also I did not have any luck with the bootstrap suggested $('something').tab('show'); instead I could only get $('#modal_3_tab_2_li_a').trigger('click'); to work.
HTML
<ul class="list-unstyled LTabs6">
<li><a id="modal_6_tab_1_li_a" href="#LModal6" class="tab-link" data-toggle="modal" data-target=".bs-modal-lg6"
rel="noopener noreferrer">tab1</a></li>
<li><a id="modal_6_tab_2_li_a" href="#LModal6" class="tab-link" data-toggle="modal" data-target=".bs-modal-lg6"
rel="noopener noreferrer">tab2</a></li>
</ul>
<ul class="nav nav-tabs hidden-xs">
<li class="active"><a id="m6_tab1" class="tab" href="#tab601" class="tab-link" data-toggle="tab">tab1</a></li>
<li><a id="m6_tab2" class="tab" href="#tab602" class="tab-link" data-toggle="tab">tab2</a></li>
</ul>
<div class="tab-content" id="tabs6"><!-- modal tab content 06 -->
<div class="tab-pane active" id="tab601">
<h3 class="kotoba_answer">tab1</h3>
<div class="right40">
<p>text1</p>
</div>
<div class="clearfix"></div>
<div class="center-div"><a class="btnPrev invisible" style="font-size:34px;">« </a><a class="btnNext"
style="font-size:34px;"> »</a></div>
</div>
<div class="tab-pane" id="tab602">
<h3 class="kotoba_answer">tab2</h3>
<div class="right40">
<p>text2</p>
</div>
<div class="clearfix"></div>
<div class="center-div"><a class="btnPrev" style="font-size:34px;">« </a><a class="btnNext"
style="font-size:34px;"> »</a></div>
</div>
JS
document.addEventListener("DOMContentLoaded", function() {
let tab = GetURLParameter('opentab');
if(tab){
// Get the tab element
let tabElement = document.getElementById(tab);
if(tabElement){
console.log(tab);
// $('#modal_3_tab_2_li_a').tab('show');
$('#modal_3_tab_2_li_a').trigger('click');
//$('tab').trigger('click');
}else{
console.log("no tab info");
}
}else{
console.log("no tab param");
}
});
function GetURLParameter(sParam) {
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) { var sParameterName=sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
return sParameterName[1];
}
}
}
The normal function of modals and tab popups is working fine, my issue is that I need to create a url to share via email. I have had a look at other questions but they pretty much cover using a button or hard coded code to open a tab.
I need to highlight selected tabs in the navigation tab wizard. tab functionality is working fine..but I need to add the CSS(border-style) for all the selected tab. for example, if I have 4 tabs. If I have selected the first and second tab(next button) those tab needs to be highlighted(apply border) and again if I click the back button the highlight needs to be removed.Any help would be appreciated. please find the image below for reference.
public tabs: string[] = ['tab1', 'tab2', 'tabs3', 'tabs4']
public next(): void {
const currentIndex: number = this.tabs.indexOf(this.selectedTab);
const newIndex = currentIndex + 1;
this.selectedTab = this.tabs[newIndex];
}
public back(): void {
const currentIndex: number = this.tabs.indexOf(this.selectedTab);
const newIndex = currentIndex - 1;
this.selectedTab = this.tabs[newIndex];
}
.tab-highlight {
border-top: 2px solid blue;
cursor: pointer;
}
<ul class="nav nav-tabs side_nav" role="tablist">
<li *ngFor="let tab of tabs; let i= index;" [attr.data-index]="i" role="presentation"
class="accounts_li"
[class.active]="selectedTab===tab" (click)="toggle($event)">
<a (click)="selectedTab = tab" aria-controls="one" role="tab" data-toggle="tab">{{tab}}</a>
</li></ul>
<div class="tab-content">
<div id="tab1" *ngIf="selectedTab === tabs[0]" role="tabpanel" class="tab-pane active">
tab1 content
</div>
<div id="tab2" *ngIf="selectedTab === tabs[1]" role="tabpanel" class="tab-pane active">
tab2 content
</div>
<div id="tab3" *ngIf="selectedTab === tabs[2]" role="tabpanel" class="tab-pane active">
tab3 content
</div>
</div>
<button class="button" (click)="back()"><span>
Back</span>
</button>
<button class="button" (click)="next()"><span>
Next</span>
</button>
image
If you want to select multiple tabs then you should change the selectedTab property with an array which will hold all selected tabs. Then you could create a method which will check if the tab is selected or not in order to push/remove from the selected array. Lastly, for the conditional class name you could use [ngClass]="isSelected(tab) ? 'tab-highlight' : null", this will add the class only if the condition is evaluated to true (more on this here https://angular.io/api/common/NgClass)
Component code:
tabs: string[] = ["tab1", "tab2", "tab3", "tab4"];
selectedTabs: string[] = [];
onTabClick(tab) {
if (this.isSelected(tab)) {
let index = this.selectedTabs.indexOf(tab);
this.selectedTabs.splice(index, 1);
} else {
this.selectedTabs.push(tab);
}
}
isSelected(tab: string) {
return this.selectedTabs.indexOf(tab) > -1;
}
HTML code for the tab menu:
<ul class="nav nav-tabs side_nav" role="tablist">
<li *ngFor="let tab of tabs; let i= index;" [attr.data-index]="i" role="presentation"
[ngClass]="isSelected(tab) ? 'tab-highlight' : null">
<a (click)="onTabClick(tab)" aria-controls="one" role="tab" data-toggle="tab">{{tab}}</a>
</li>
</ul>
Stackblitz: https://stackblitz.com/edit/question63192497?file=src%2Fapp%2Fapp.component.ts
I am working on tab
There are 5 tabs
About Us
Our Work
Our Team
News & Events
Contact us
and inside each of them there are content and links, images.
What i am trying to achieve here whenever i click the link inside the tab Our Team content,
It should open the Contact us Tab content.
Here is the code i am using currently, It has some custom js and jquery 2.2.0 used.
Please check the code, i haven't put css here.
The live link of this example is Live Demo
Please help me
// TABS
var tabs = $('.container_tabs');
$('.tabs-content > div', tabs).each(function (i) {
if (i != 0) $(this).hide(0);
});
tabs.on('click', '.tabs a', function (e) {
e.preventDefault();
var tabId = $(this).attr('href');
$('.tabs a', tabs).removeClass();
$(this).addClass('active');
$('.tabs-content > div', tabs).hide(0);
$(tabId).show();
});
// var tabs1 = $('.container_tabs1');
// $('.tabs-content > div', tabs1).each(function (i) {
// if (i != 0) $(this).hide(0);
// });
// tabs1.on('click', '.tabs a', function (e) {
//
// e.preventDefault();
//
// var tabId = $(this).attr('href');
//
//
// $('.tabs a', tabs1).removeClass();
// $(this).addClass('active');
//
// $('.tabs-content > div', tabs1).hide(0);
// $(tabId).show();
//
// });
(function ($) {
jQuery.fn.lightTabs = function (options) {
var createTabs = function () {
tabs = this;
i = 0;
showPage = function (tabs, i) {
$(tabs).children("div").children("div").hide();
$(tabs).children("div").children("div").eq(i).show();
$(tabs).children("ul").children("li").removeClass("active");
$(tabs).children("ul").children("li").eq(i).addClass("active");
};
showPage(tabs, 0);
$(tabs).children("ul").children("li").each(function (index, element) {
$(element).attr("data-page", i);
i++;
});
$(tabs).children("ul").children("li").click(function () {
showPage($(this).parent().parent(), parseInt($(this).attr("data-page")));
});
};
return this.each(createTabs);
};
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs cw-wrapper">
<ul class="cw-30">
<li class="" data-page="0">About Us</li>
<li data-page="1">Our Work</li>
<li data-page="2">Our Team</li>
<li data-page="3">Our Partners</li>
<li data-page="4" class="active">Work With Us</li>
<li data-page="5">Contact us</li>
</ul>
<div class="cw-70">
<div class="content" style="display: none;">
Content 1
</div>
<div class="content" style="display: none;">
Content 2
</div>
<div class="content" style="display: none;">
Content 3
</div>
<div class="content" style="display: none;">
Content 4
</div>
<div class="content" style="display: none;">
<h3>Contact us Content</h3>
</div>
</div>
</div>
If I understand you correctly, you want to be able to switch tabs by links that are inside your tab contents too. In that case you should create a function for switching tabs, instead of a click event in you menu. here is an example:
edit #1:
I removed all onclicks and bind switchTab function to all elements that have switch-tab class.
edit #2:
As requested, you can pass initial tab number from url ?tab=x codepen
// set tab from url
// sample url: http://mywebsite.com/my-route?tab=2
$(document).ready(function() {
var url = new URL(window.location.href);
var tabNumber = url.searchParams.get('tab');
if (tabNumber)
switchTab(tabNumber);
});
// change tab by clicking an element with "switch-tab" class
$('.switch-tab').on('click', function(e) {
var tabNumber = e.target.getAttribute('data-tab');
switchTab(tabNumber);
});
// change tab by passing tab number
function switchTab(tabNumber) {
$('#tabs li').removeClass('active');
$('#tabs li[data-tab=' + tabNumber + ']').addClass('active');
$('.content').css('display', 'none');
$('.content[data-content=' + tabNumber + ']').css('display', 'block');
}
<style>
#tabs li.active {
font-weight: bold;
}
.content {
display: none;
}
.content.visible {
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs cw-wrapper">
<ul class="cw-30" id="tabs">
<li data-tab="0" class="switch-tab">About Us</li>
<li data-tab="1" class="switch-tab">Our Work</li>
<li data-tab="2" class="switch-tab">Our Team</li>
<li data-tab="3" class="switch-tab">Our Partners</li>
<li data-tab="4" class="switch-tab active">Work With Us</li>
<li data-tab="5" class="switch-tab">Contact us</li>
</ul>
<div class="cw-70">
<div class="content" data-content="1">
<p>Content 1</p>
</div>
<div class="content" data-content="2">
<p>Content 2</p>
</div>
<div class="content" data-content="3">
<p>Content 3</p>
</div>
<div class="content visible" data-content="4">
<p>Content 4</p>
go to contact us
</div>
<div class="content" data-content="5">
<h3>Contact us Content</h3>
</div>
</div>
</div>
I am using a bootstrap tabpanel like this:
<div class="row spiff_tabs_body">
<!-- Nav tabs -->
<ul class="nav nav-tabs spiff_tabs" role="tablist">
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
<div role="tabpanel" class="tab-pane" id="instantspiff"></div>
</div>
</div>
</div>
</div>
Using javascript I need to figure out which tab the user is on. I'm not really sure how to do this. I've read a lot about selecting the active tab, but I can't really find out how to check which tab the user has selected.
Updated:
I forgot to mention I need to be able to check in a conditional if statement which tab is selected and then do something based on which tab is active.
I need to do something like this:
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// here is the new selected tab id
var selectedTabId = e.target.id;
});
var id = $('.tab-content .active').attr('id');
if (id == "instantspiff") {
alert("instantspiff");
}
else {
alert("delayedspiff");
}
</script>
check this
var id = $('.tab-content .active').attr('id');
if(id == "delayedspiff") {
alert("delayedspiff");
}
else {
alert("instantspiff");
}
when they click on a tab add this
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// here is the new selected tab id
var selectedTabId = e.target.id;
});
I have implemented Navigation Tabs using Bootstrap. I am trying to get the width of a div when one particular tab becomes active. While the active tab is detected correctly, the width is returned 0. I'm not sure why this is happening.
Here is a fiddle: http://jsfiddle.net/pThn6/811/
HTML:
<ul class="nav nav-tabs">
<li>AAA</li>
<li class="active">BBB</li>
<li>CCC</li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">
<div class='col-md-9'>
...Content vol...
</div>
</div>
<div class="tab-pane active" id="bbb">
</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
JS:
$(function() {
$('a[data-toggle="tab"]').on('click', function(e) {
var s = "" + (e.target);
if(s.search('aaa') != -1) {
alert($('.col-md-9').css("width"));
}
});
})
How can I solve this?
timing issue, the tab hasn't opened yet so it hasn't resized the column, try this
http://jsfiddle.net/pThn6/812/
setTimeout(function() {
alert($('.col-md-9').width());
}, 100);
a better solution would be to hook into the open event provided by bootstrap, something like this
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var tab = "" + (e.target);
if(tab.search('aaa') != -1) {
alert($('.col-md-9').width());
}
});
fiddle: http://jsfiddle.net/pThn6/819/