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!
Related
I want to create a link that will target a specific tab, in another page of my site.
I have tried to create link like this: www.example.com/test.html#tab2, but it always targets the first tab (I guess the tab with show class).
index.html
link for catalog
text.html
<ul class="nav nav-tabs">
<li id="homeTab" class="active"><a data-toggle="tab" href="#home" aria-expanded="true">menu 1</a></li>
<li id="menu1Tab"><a data-toggle="tab" href="#menu1">menu 2</a></li>
<li id="menu2Tab"><a data-toggle="tab" href="#menu-catalog">menu 3</a></li>
<li id="menu3Tab"><a data-toggle="tab" href="#menu3">menu 4</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
...
</div>
<div id="menu1" class="tab-pane fade">
....
</div>
<div id="menu-catalog" class="tab-pane fade">
...
</div>
<div id="menu3" class="tab-pane fade">
...
</div>
</div>
When I click the link from index.html to target and open the tab with the right ID.
If you're using the bootstrap + jquery setup, you can get this behavior pretty easily with the following:
$(() => {
const {
hash
} = document.location;
if (!hash) return false;
$(`.nav.nav-tabs [href="${hash}"]`).tab('show');
});
Try this
$(function(){
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
});
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>
The objective is, I have some products and each product is under multiple categories. Initially I list all product and I need to filter by jQuery. I've tried the following method but it seems not working. can anyone tell me how can I achieve this ?
<section class="container">
<ul class="filters">
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,usb-30"}]}'>HD TV</a></li>
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,android-tv"}]}'>FULL-HD</a></li>
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "android-tv,usb-30"}]}'>USB 3.0</a></li>
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,full-hd"}]}'>Android</a></li>
</ul>
<div id="products">
<div class="items" data-filter='hdtv,usb-30'>
<h2>I am HDTV haing usb 3.0</h2>
</div>
<div class="items" data-filter='hdtv,android-tv'>
<h2>I am HDTV but a android tv</h2>
</div>
<div class="items" data-filter='android-tv,usb-30'>
<h2>I am android tv</h2>
</div>
<div class="items" data-filter='hdtv,full-hd'>
<h2>I am a HDTV and full HD tv</h2>
</div>
</div>
</section>
This is my jQuery
$(document).ready(function(){
$(".nav-filter").click(function(e){
e.preventDefault();
$(".items").hide();
_ = $(this);
filteritem = _.data("filters");
if(_.attr("data-status")=="active"){
_.attr("data-status","");
_.removeClass("active");
}else{
_.attr("data-status","active")
_.addClass("active");
}
count = 0;
$( ".filters" ).find("li").each(function() {
elem = $(this).find("[data-status='active']");
item_show = elem.data("filters");
item = item_show.filterObject[0].items.split(",");
debugger;
if(typeof item_show === "undefined"){ count++; }
if(count == $( ".filters" ).find("li").length){ $(".items").show(); }
else{
$("#products").find("div").each(function(){
in_Array = $(this).data("filter").split(",");
if((item[0]==in_Array[0] || item[1]==in_Array[1]) || (item[0]==in_Array[1] || item[1]==in_Array[0])){
//$(this).show();
}
});
}
});
});
});
You can implement a filter logic like
var $items = $('#products .items').each(function() {
var values = $(this).data('filter').split(/\s*,\s*/);
$(this).data('array-filters', values);
});
$('.filters li:has([data-filters])').click(function() {
var filters = $(this).data('array-filters');
var $selected = $items.filter(function() {
var values = $(this).data('array-filters');
return values.some(function(value) {
return filters.indexOf(value) > -1;
});
});
$selected.show();
$items.not($selected).hide();
return false;
}).each(function() {
var filters = $(this).find('a').data('filters').filterObject[0].items;
filters = filters.split(/\s*,\s*/);
$(this).data('array-filters', filters);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<ul class="filters">
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,usb-30"}]}'>HD TV</a>
</li>
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,android-tv"}]}'>FULL-HD</a>
</li>
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "android-tv,usb-30"}]}'>USB 3.0</a>
</li>
<li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,full-hd"}]}'>Android</a>
</li>
</ul>
<div id="products">
<div class="items" data-filter='hdtv,usb-30'>
<h2>I am HDTV haing usb 3.0</h2>
</div>
<div class="items" data-filter='hdtv,android-tv'>
<h2>I am HDTV but a android tv</h2>
</div>
<div class="items" data-filter='android-tv,usb-30'>
<h2>I am android tv</h2>
</div>
<div class="items" data-filter='hdtv,full-hd'>
<h2>I am a HDTV and full HD tv</h2>
</div>
</div>
</section>
Can you please try the following
$(document).ready(function () {
$(".nav-filter").click(function (e) {
e.preventDefault();
$(".items").hide();
_ = $(this);
var filteritem = _.data("filters");
var item = filteritem.filterObject[0].items.split(',');
$("#products").find("div").each(function () {
for (var i = 0; i < item.length; i++) {
if ($(this).data("filter").indexOf(item[i]) >= 0) {
$(this).show();
}
}
});
});
});
Fiddler
I have the following code for a set of dynamic bootstrap tabs:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Me</a></li>
<li><a data-toggle="tab" href="#menu1">AAA</a></li>
<li><a data-toggle="tab" href="#menu2">BBB</a></li>
<li><a data-toggle="tab" href="#menu3">CCC</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3><u>Me</u></h3>
<p>Content</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3><u>AAA</u></h3>
<p>content</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3><u>BBB</u></h3>
<p>content</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3><u>ccc</u></h3>
<p>content</p>
</div>
I want to know if there's a jquery that will automate them after say, 5 seconds to shift to the next tab then revert back to the beginning and loop?
Here is a small script the might give you an idea:
var i = 0;
setInterval(function(){
var content = $(".tab-pane");
var menu = $(".nav-tabs li");
var prev = (i%(content.length))-1;
var curr = i%(content.length);
if(curr != 0){
$(menu[prev]).removeClass("active");
$(menu[curr]).addClass("active");
$(content[prev]).removeClass("in active");
$(content[curr]).addClass("in active");
}else{
$(menu[menu.length-1]).removeClass("active");
$(menu[0]).addClass("active");
$(content[content.length-1]).removeClass("in active");
$(content[0]).addClass("in active");
}
i++;
},1000);
Working fiddle : https://jsfiddle.net/mt9n1dbs/
Update:
I actually got a better solution for this:
var i = 0;
setInterval(function(){
var menu = $(".nav-tabs li");
var curr = i%(menu.length);
if(curr != 0){
$(".nav-tabs > .active").next('li').find('a').trigger('click');
}else{
$(menu[0]).find('a').trigger('click');
}
i++;
},1000);
Working fiddle 2 : https://jsfiddle.net/mt9n1dbs/1/
Now my code uses ng-model:
<input type="checkbox" ng-model="padesVisual.selected">
However, I need to change to ng-click:
<li>
<a href="#PAdES" aria-controls="PAdES" role="tab" data-toggle="tab"
ng-click="VerificaPades(verifica)">PAdES</a>
</li>
I tried to use this function:
$scope.VerificaPades = function(verifica) {
if ($scope.padesVisual.selected) {
return true;
} else {
return false;
}
}
The snippet below demonstrates one way to implement a boolean toggle using ng-click. The main point of interest is the VerificadaPades function, which actually toggles the boolean model.
var eAssinatura = angular.module("pades", []);
eAssinatura.controller('AdicionarEditarFormatoAssinaturaDialogController', ['$scope',
function ($scope) {
$scope.padesVisual = {
positions: [],
fields: [],
selected: false,
sealStamp: { isSelected: false, image: '' }
}
$scope.VerificaPades = function () {
$scope.padesVisual.selected = !$scope.padesVisual.selected;
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="pades" ng-controller="AdicionarEditarFormatoAssinaturaDialogController">
<ul class="nav nav-tabs" role="tablist">
<li class="active">
CAdES
</li>
<li>
<a href="#PAdES" aria-controls="PAdES" role="tab" data-toggle="tab" ng-click="VerificaPades()">
PAdES</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="CAdES">CAdES</div>
<div role="tabpanel" class="tab-pane fade" id="PAdES">
<div class="row" ng-show="padesVisual.selected">
Selected
</div>
</div>
</div>
</div>