I am trying to load the tab contents dynamically from different html page. When I click EROs tab it should display the contents from /SVB/Tax_Eros.html file without reloading the page. Likewise when Import tab is clicked it should display the contents from /SVB/Tax_Imports
<ul class="nav nav-tabs">
<li class="active" >
EROs
</li>
<li>
Imports
</li>
<li>
Accounting
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="eros">
<script>
$('#eros').click(function(){
$('#Taxeros').load($(this).attr('href'));
});
</script>
</div>
<div class="tab-pane" id="imports">
<script>
$('#imports').click(function(){
$('#Taximports').load($(this).attr('href'));
});
</script>
</div>
<div class="tab-pane" id="accounting">
<script>
$('#accounting').click(function(){
$('#Taxaccounting').load($(this).attr('href'));
});
</script>
</div>
</div>
Since you are using Bootstrap Tabs (3.3.7) you will need to modify your markup as Bootstrap expects certain conventions for it to do its magic without configuring a bunch of JS.
Instead of placing the page you need to load in the href attribute we place it in a custom data-src attribute. Bootstrap expects the value of the href attribute to be the ID of the tab pane associated with the tab. We also added data-toggle="tab" as that is required for Bootstrap Tabs to function.
It looked like you were trying to load content on tab click but that isn't useful for the default tab and it's tab pane as there won't be any content in it initially. So we've passed a function to jQuery that will get executed when the DOM is ready. This function will parse the tabs and load content into the tab panes based on the attribute values.
$(function() {
$('.nav-tabs a').each(function(index, el) {
var $this = $(this);
var pane = $this.attr('href');
var src = $this.data('src');
$(pane).load(src);
});
});
<ul class="nav nav-tabs">
<li class="active">
<a data-src="/SVB/Tax_Eros" href="#eros" data-toggle="tab">EROs</a>
</li>
<li>
<a data-src="/SVB/Tax_Imports" href="#imports" data-toggle="tab">Imports</a>
</li>
<li>
<a data-src="/SVB/Tax_Accounting" href="#accounting" data-toggle="tab">Accounting</a>
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="eros">1</div>
<div class="tab-pane" id="imports">2</div>
<div class="tab-pane" id="accounting">3</div>
</div>
As far as I know, Stack Snippets cannot mock Ajax requests so here's a JSFiddle and a Plunker that do.
$(function() {
$('.nav-tabs a').each(function(index, el) {
var $this = $(this);
var pane = $this.attr('href');
var src = $this.data('src');
$(pane).load(src);
});
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<ul class="nav nav-tabs">
<li class="active">
<a data-src="/SVB/Tax_Eros" href="#eros" data-toggle="tab">EROs</a>
</li>
<li>
<a data-src="/SVB/Tax_Imports" href="#imports" data-toggle="tab">Imports</a>
</li>
<li>
<a data-src="/SVB/Tax_Accounting" href="#accounting" data-toggle="tab">Accounting</a>
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="eros">1</div>
<div class="tab-pane" id="imports">2</div>
<div class="tab-pane" id="accounting">3</div>
</div>
<html>
<head>
<script type='text/javascript'>
function clicks () {
var myButtons = document.querySelectorAll('.eros') || null;
if (myButtons != null){
for (var i = 0; i < myButtons.length; i++){
myButtons[i].addEventListener('click', function () {
var url = this.getAttribute('data-href'); // location to load
var obj = this.getAttribute('data-id');//id to append content
var type = 'GET'; /*-> post or get-> if is 'post' page must be in Php or other server language*/
data = '';
var objElm = document.querySelector('#'+obj) || null;
if (objElm === null){console.log('no element to write content'); return;}
xmlRequest (url, type, data, obj)
}, !1);
}
}
}
function xmlRequest (url, type, data, obj){
var xhr = new XMLHttpRequest || null;
if (chr === null){console.log('Obsolete browser');return;}
xhr.addEventListener('load', function () {
if (this.status == 200 && this.readyState == 4){
obj.innerHTML = this.responseText;
}
else {console.log('Error')}
}, !1);
xhr.open(type, url);
xhr.setRequestHeader('Content-type', 'Application/x-www-form-urlencoded');
xhr.send(data)
}
</script>
<script type='text/javascript'>
window.addEventListener('load', function () {
clicks ();
}, !1)
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active" >
<a data-href="/SVB/Tax_Eros" data-toggle="tab" data-id="eros" class="eros">EROs</a>
</li>
<li>
<a data-href="/SVB/Tax_Imports" data-toggle="tab" data-id="imports" class="eros">Imports</a>
</li>
<li>
<a data-href="/SVB/Tax_Accounting" data-toggle="tab" data-id="accounting" class="eros">Accounting</a>
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="eros"> </div>
<div class="tab-pane" id="imports"></div>
<div class="tab-pane" id="accounting"></div>
</div>
</body>
Related
here i am using tab it is fine,i want to make some extra changes , in my footer page i have 4 link , if i am click that link means URL should be like this ouroffice.php?cityname=chennai, now what i want to do means bassed upon the cityname i want to make the tab is active i tried but i am not able to make the tab is active,how can do this?
//var cityname = '<?php echo $_GET['cityname']?>';
var cityname = "hydrabad";
if (cityname == "chennai") {
$("#nv_li").tabs({
active: 1
});
} else if (cityname == "hydrabad") {
$("#nv_li").tabs({
active: 2
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="padding-top: 30px;">
<ul class="nav nav-tabs" id="nv_li">
<li class="active" id="link"><a data-toggle="tab" href="#beng">BENGALURU</a>
</li>
<li id="link"><a data-toggle="tab" href="#chennai">CHENNAI</a>
</li>
<li id="link"><a data-toggle="tab" href="#hydrabad">HYDERABAD</a>
</li>
<li id="link"><a data-toggle="tab" href="#dubai">DUBAI</a>
</li>
<li id="link"><a data-toggle="tab" href="#london">LONDON</a>
</li>
<li><a data-toggle="tab" href="#kochi" style="border-right: 0px;">HONG KONG</a>
</li>
</ul>
<div class="tab-content">
<div id="beng" class="tab-pane fade in active">
<?php include 'bangalore.php';?>
</div>
<div id="chennai" class="tab-pane fade">
<?php include 'chhenai.php';?>
</div>
<div id="hydrabad" class="tab-pane fade">
<?php include 'hyd.php';?>
</div>
<div id="kochi" class="tab-pane fade">
<?php include 'kochi.php';?>
</div>
<div id="mumbai" class="tab-pane fade">
<?php include 'mumbai.php';?>
</div>
<div id="pune" class="tab-pane fade">
<?php include 'pune.php';?>
</div>
<div id="abu" class="tab-pane fade">
<?php include 'abu_dhabi.php';?>
</div>
<div id="dubai" class="tab-pane fade">
<?php include 'dubai.php';?>
</div>
<div id="london" class="tab-pane fade">
<?php include 'london.php';?>
</div>
</div>
</div>
Just use window.location.search and run function(on document ready) to set active class to appropriate li element, like so:
// Search parameter extractor
function getSearchParam(searchKey) {
var params = window.location.search.replace('?', '').split('&');
var searchParam = null;
var keyValue;
for (var i = 0, len = params.length; i < len; i++) {
keyValue = params[i].split('=');
if (keyValue[0] === searchKey) {
searchParam = keyValue[1];
break;
}
}
return searchParam;
}
// Function to set active city class
function setActiveCity(cityName) {
var link = document.querySelector('a[data-toggle="tab"][href="#' + cityName + '"]');
var content = document.getElementById(cityName);
if (link) {
link.parentNode.classList.add('active');
}
if (content) {
content.classList.add('in', 'active');
}
}
var city = getSearchParam('cityname');
if (city) {
setActiveCity(city);
}
<ul id="navi">
<li><a class="menu" href="#">Pune</a></li>
<li><a class="menu" href="#">Baramati</a></li>
<li><a class="menu" href="#">chennai T</a></li>
<li><a class="menu" href="#">London</li>
<li><a class="menu" href="#">UK</a></li>
$('a.menu').click(function(){
$('a.menu').removeClass("active");
$(this).addClass("active");
});
I Hope. it will help you!
I did see a page somewhere on internet, which made impressive tabs like below:
All|Fashion|Jewerry|Food
When user clicks on All then it will show all items.
when user clicks om Fashion or else then i will show only items of its category.
I remember that each item have something like All Fashion/All Food so that the tab control panel would show/hide item.
I tried to find some tutorial about tab on bootstrap. But i did not see any example like that in document.
Could someone please show how to do that with bootstrap and without bootstrap???
The reasons's is i am only good with back-end.
I am learning front-end.
Thanks in advance.
i did
it without bootstrap
html:
<ul id='list_tabs'>
<li><a data-filter='*' href='#'>All</a></li>
<li><a data-filter='meat' href='#'>meat</a></li>
<li><a data-filter='fish' href='#'>fish</a></li>
</ul>
<ul id='list_products'>
<li data-category='fish meat'>product 1 </li>
<li data-category='fish'>product 2 </li>
<li data-category='meat'>product 3 </li>
</ul>
My Javascript:
$(document).ready(function(){
$('#list_tabs').click(function(event){
var filter = $(event.target).attr('data-filter');
$('#list_products li').each(function(){
var item = $(this);
if(filter=='*'||(item.attr('data-category').indexOf(filter)!= -1))
item.show();
else
item.hide();
});
});
});
I'm still looking into how to do it with bootstrap.
Thank everyone for helping.
P/s: I did saw same control like that in this site
I am looking into it. But i still hope someone could help me.
I loved checking this too. You can improvise as you learn. I give you a setup for you to start here.
// optional code: Throw event on tab change and work with it.
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
var elem = $(e.target),
target = elem.attr("href");
if (target === hashify('Tab_1') || target === hashify('Tab_3') || target === hashify('Tab_5')) {
$(hashify('testImage')).attr('src', 'http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded&a');
}
else {
$(hashify('testImage')).attr('src', 'https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png');
}
});
function hashify(str){
return '#' + str;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul id="myTab" class="nav nav-tabs">
<li class="active">Tab 1
</li>
<li class="">Tab 2
</li>
<li class="">Tab 3
</li>
<li class="">Tab 4
</li>
<li class="">Tab 5
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane active in" id="Tab_1">
Tab 1
</div>
<div class="tab-pane" id="Tab_2">
Tab 2
</div>
<div class="tab-pane" id="Tab_3">
Tab 3
</div>
<div class="tab-pane" id="Tab_4">
Tab 4
</div>
<div class="tab-pane" id="Tab_5">
Tab 5
</div>
<img id = "testImage" src = "http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded&a" alt="Logo" height="150" width="150">
</div>
<
After applying styles of Codrops in nav bar, I cannot make links go to the area id in a single page.
If I press "Clients" (for example), the link does not go to the id Clients area.
I need help in identifying the source of the problem.
Here is my HTML:
<nav class="menu menu--ferdinand">
<ul class="menu__list">
<li class="menu__item">
<a class="menu__link" href="#Services">Services</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#Clients">Clients</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#Us">About Us</a>
</li>
<li class="menu__item menu__item--current">
<a class="menu__link" href="#Contact">Contact</a>
</li>
</ul>
</nav>
script on the bottom of my index.html (I have classie.js, clipboard.min.js on js folder)
<script src="js/classie.js"></script>
<script src="js/clipboard.min.js"></script>
<script>
(function() {
[].slice.call(document.querySelectorAll('.menu')).forEach(function(menu) {
var menuItems = menu.querySelectorAll('.menu__link'),
setCurrent = function(ev) {
ev.preventDefault();
var item = ev.target.parentNode; // li
// return if already current
if (classie.has(item, 'menu__item--current')) {
return false;
}
// remove current
classie.remove(menu.querySelector('.menu__item--current'), 'menu__item--current');
// set current
classie.add(item, 'menu__item--current');
};
[].slice.call(menuItems).forEach(function(el) {
el.addEventListener('click', setCurrent);
});
});
[].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) {
link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
new Clipboard(link);
link.addEventListener('click', function() {
classie.add(link, 'link-copy--animate');
setTimeout(function() {
classie.remove(link, 'link-copy--animate');
}, 300);
});
});
})(window);
</script>
Areas (example):
<section id="Clients" class="Clients">
</section>
<section id="Services" class="Services">
</section>
ev.preventDefault() Prevents a link from doing it's default thing (i.e. follow the link to a new page or bookmark).
I have the following Bootstrap nav tabs:
<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>
I need to be able to check which tab is selected and then display an alert. I have the following javascript in my view:
<script>
$(function () {
FormGet('dashboard/delayedspiff', 'delayedspiff');
});
</script>
<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 == "delayedspiff") {
alert("delayedspiff");
} else {
alert("instantspiff");
}
});
</script>
When I click the tabs it works, but the alert always displays delayedspiff. I need to dislay instantspiff when they click on the instantspiff tab. Can anyone see what I'm doing wrong?
You just need to remove class active from all tabs and add it to the tab which was clicked.
EDIT: In order to get the id of clicked tab, try using an attribute data-id on the tab selections.
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var wrongid = $('.tab-content .active').attr('id');
$('a[data-toggle="tab"]').removeClass("active"); // remove class active from all tabs
$(this).addClass("active"); // add class active to the current tab
var correctid = $(this).data("id"); // get the attribute data-id of the clicked tab
alert($('.tab-content .active')[0].outerHTML); // shows why you are getting the incorrect id
if (correctid == "delayedspiff")
alert("delayedspiff");
else
alert("instantspiff");
});
</script>
Updated fiddle : https://jsfiddle.net/DTcHh/14313/
I just started learning front-end development & really need help with a practice project.
I am trying to create 2-layers nested tabs where the user can add tabs on the outer layer. Each outer tab will have inner tabs where the user can also add more inner tabs. Each tab will have the same content for now, so I'm using an iframe to accomplish this - if you have better suggestion, then I would very much like to hear it.
The issue I'm having right now is that I don't know how to bind the inner tabs to the outer tabs. Each of the outer tabs should have different number of tabs depending on how many inner tabs the user creates. I cannot seem to accomplish this & all of my outer tabs currently have the same inner tabs.
Any help/input would be very much appreciated! Thanks.
Here's my code snippet:
<div class="container">
<!-- top level tabs -->
<ul class="nav nav-tabs" id="topNav">
<li class="active">Home<span>x</span></li>
<li>+ Add Tab</li>
</ul>
<div class="tabbable">
<!--bottomNav -->
<ul class="nav nav-tabs" id="bottomNav">
<li class="active">Test<span>x</span></li>
<li>+ Add Tab</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="bottom1"><br><iframe src="form.html" width="100%" height="60%" allowtransparency="true" frameBorder="0"></iframe></div>
</div>
</div>
</div>
My script:
$(document).ready(function() {
$(".nav-tabs").on("click", "a", function(e){
e.preventDefault();
$(this).tab('show');
})
.on("click", "span", function () {
var anchor = $(this).siblings('a');
$(anchor.attr('href')).remove();
$(this).parent().remove();
$(".nav-tabs li").children('a').first().click();
});
/* Adding New Tabs */
$('.addTop').click(function(e) {
e.preventDefault();
var id = $("#topNav").children().length;
$(this).closest('li').before('<li>#'+ id + '<span>x</span></li>');
// $('.tab-content').append('<div class="tab-pane" id="top'+id+'">'+ '<br><iframe src="form.html" width="100%" height="60%" allowtransparency="true" frameBorder="0">' + '</iframe>' + '</div>');
});
$('.addBottom').click(function(e) {
e.preventDefault();
var id = $("#bottomNav").children().length;
$(this).closest('li').before('<li>#'+ id + '<span>x</span></li>');
$('.tab-content').append('<div class="tab-pane" id="bottom'+id+'">'+ '<br><iframe src="form.html" width="100%" height="60%" allowtransparency="true" frameBorder="0">' + '</iframe>' + '</div>');
});
});
There are ready made sollutions out there, but let us leave it for others to suggest.
In reply to your issue: Your addTop.onclick event only adds a new tab, but does not create new content.tabbable for the said tab.
When you ad a new tab you have to do 3 things:
create a new tab.
create a new content for the new tab.
associate event.
Obviously you missed number 2 & 3.
Example:
$('.addTop').click(function(e){
e.preventDefault();
// create new tab
var newTab = $('<li>New Tab</li>');
$('#topNav').append(newTab);
// create new content for the new tab
var newTabContent = $('<div class="tabbable"></div>').hide();
$('.container').append(newTabContent);
// associate tab to content
newTab.click(function(){
newTabContent.show();
// hide others
$('.container > .tabbable').hide();
});
});
Hope this could help. This is the solution without using iframe
You can see the effect in jsfiddle link below:
http://jsfiddle.net/Lzfsgeq9/
Basically some points you need to be aware of are:
1.Use ahref to direct you subtab from parent tab
2.Use "on" event listener to deal with newly created element about event delegation issue
<div class="tabbable boxed parentTabs">
<ul id="topNav" class="nav nav-tabs">
<li class="active">Tab 1
</li>
<li>Tab 2
</li>
<li>+ Add Tab</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="top1">
<div class="tabbable">
<ul id="bottomNav1" class="nav nav-tabs" data-parent="1">
<li class="active">Tab 11
</li>
<li>Tab 12
</li>
<li>+ Add Tab</li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="top2">
<div class="tabbable">
<ul id="bottomNav2" class="nav nav-tabs" data-parent="2">
<li class="active">Tab 21
</li>
<li>Tab 22
</li>
<li>+ Add Tab</li>
</ul>
</div>
</div>
</div>
$("ul.nav-tabs").on("click","a",function (e) {
e.preventDefault();
$(this).tab('show');
});
$('.addTop').click(function(e) {
e.preventDefault();
var id = $("#topNav").children().length;
$(this).closest('li').before('<li><a href="#top'+id+'">Tab'+ id + '</li>');
createNewSubTab(id);
});
$('div.tab-content').on("click",".addBottom",function(e) {
e.preventDefault();
var parentId = $(this).closest('ul').data("parent");
var id = $("#bottomNav" + parentId).children().length;
$(this).closest('li').before('<li><a href="#bottom'+parentId+id+'">Tab'+ parentId + id + '</li>');
});
var createNewSubTab = function(id){
var bottomTabPane = $("<div></div>").attr({
id: "top" + id,
"class": "tab-pane fade"
});
var tabContainer = $("<div></div>").attr({
"class":"tabbable"
});
var bottomPanel = $("<ul></ul>").attr({
id:"bottomNav"+id,
"class":"nav nav-tabs",
"data-parent": id
});
var bottomAdd = $("<li></li>").append("<a href='#' class='addBottom' data-toggle='tab'>+ Add Tab</a>");
bottomTabPane.append(tabContainer);
tabContainer.append(bottomPanel);
bottomPanel.append(bottomAdd);
$(".tab-content").append(bottomTabPane);
}