I have a simple tabbed interface that switches between hidden div and sets an active state on the appropriate tab when clicked.
When someone visits the url of the tab, it shows the contents of that tab only, which is fine.
What I need it to do is also set the active state of that tab if you visited that url directly.
I've got url's such as abc.com/index.html#gallery, abc.com/index.html#recipes etc.
So if you visit abc.com/index.html#recipes - the recipes tab is highlighted.
My code is below, thanks in advance for any advice!
$(function () {
var app = {
vars: {
gallery: $('#gallery'),
tabContent: $('.tabs .tabContent'),
nav: $('.tabs nav a')
},
events: function () {
//tabs
app.vars.nav.on('click', function (e) {
var thisHash = $(this).attr('href');
app.setHash(thisHash);
e.preventDefault();
$('nav a').removeClass('active');
$(this).addClass('active');
});
//hashchange
$(window).on('hashchange', function() {
app.checkHash();
});
},
checkHash: function () {
var hash = app.getHash();
if (hash == '') {
app.vars.tabContent.hide();
app.vars.gallery.show();
} else {
app.goTo(hash);
}
},
getHash: function () {
return window.location.hash;
},
setHash: function (id) {
window.location.hash = id;
},
goTo: function (id) {
app.vars.tabContent.hide();
$(id).fadeIn();
}
}
app.events();
app.checkHash();
});
You need to amend the goTo function to set the active class on the relevant tab. Try this:
goTo: function (id) {
app.vars.tabContent.hide();
$(id).fadeIn();
$('nav a[href="' + id + '"]').addClass('active').siblings().removeClass('active');
}
Related
I have a link in my menu. It has an attributte like title=.roc.
When I click on this link, I want to save this attribute and click on element with the same attribute on the destination page.
Page example.com. I click in the next link.
<li class="menu-item"><a title=".roc" href="https://example.com/port/#flash">Roc</a></li>
So now, in example.com/port/, it should click the element with title=".roc":
<a id="flash" href="#" title=".roc">ROC2</a>
I have this code, but I dont know how pass the attribute instead the hash:
jQuery(function ($) {
var activeTab = document.querySelector(location.hash);
history.replaceState(null, null, ' ');
window.addEventListener('load', function () {
if (activeTab) {
setTimeout(function(){ activeTab.click(); }, 100);
}
})
});
on the pages you want to hook transfer 'title' from:
jQuery(function ($) {
$(document.body).on('click','a[title]', function(event) {
sessionStorage.setItem('title', event.target.getAttribute('title'));
});
});
then on the other page:
jQuery(function ($) {
var activeTab = document.querySelector(`[title="${sessionStorage.getItem('title')}"]`);
window.addEventListener('load', function (event) {
if (activeTab) {
setTimeout(function(){ activeTab.click(); }, 100);
}
})
});
I developed a navigation bar. I just add an active class for links that highlight the current link. The strange thing is that the feature is working on my local pc perfectly. I just uploaded it to my server and check, but it's not working at all.
This is the uploaded site
This is the script that I used.
$(function () {
var url = window.location;
$('ul.active-link a[href="' + url + '"]').parent().addClass('active');
$('ul.active-link a').filter(function () {
return this.href == url;
}).parent().addClass('active');
});
<script>
$(document).ready(function () {
var location = window.location.href;
$('#nav li a').each(function(){
if(location.indexOf(this.href)>-1) {
$(this).parent().addClass('active');
}
});
});
I have a working clickevent handler (don't know if it's the right word for it) on a page which uses show/hide (like tabs) if you click on one of the on-page links. This works perfectly, but now I walk into another issue.
When I link to one of the tabs from a different page, eg. /page-slug/#tabtoshow it won't show the right tab, it just shows the first (open) tab. I want it to show the right tab when a URL contains the same id, eg #tabtoshow. The tabs will have the same id as the link.
This is my current script.
$(function() {
$(".elevator a").click(function(evt) {
evt.preventDefault();
});
});
$(document).ready(function() {
$('a[href="#ondernemen"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#ondernemen').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#groeien').slideUp(1000);
$('#spelen').slideUp(1000);
});
$('a[href="#groeien"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#groeien').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#ondernemen').slideUp(1000);
$('#spelen').slideUp(1000);
});
$('a[href="#spelen"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#spelen').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#groeien').slideUp(1000);
$('#ondernemen').slideUp(1000);
});
$('a[href="#ontdekken"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#ontdekken').slideDown(1000);
$('#spelen').slideUp(1000);
$('#groeien').slideUp(1000);
$('#ondernemen').slideUp(1000);
});
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
})
$('a[href="#ontdekken"]').parent('.label').addClass("active");
});
Thanks in advance!!
If you're moving to another physical page, not a virtual page, you will need to handle the hash on the new page. You'd need to access location.hash or location.pathname and do something based on the hash value. You could handle it similarly to this:
$(document).ready(function() {
displayTab(location.hash);
});
Your code had some repetition, I have written a more general version for you. Also, I have used location.hash to determine what tab to activate.
$(document).ready(function() {
var selector = "#ondernemen, #ontdekken, #groeien, #spelen";
$(".elevator a").click(function(evt) {
evt.preventDefault();
});
$(selector).click(function() {
var that = this;
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$(selector).each(function() {
if ($(this).attr("id") !== $(that).attr("id")) {
$(this).slideUp(1000);
}
});
$(this).slideDown(1000);
});
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
});
$(location.hash).parent('.label').addClass("active");
});
I'm using following code for my bootstrap tabs in order to have the #name of the tab in the url, as I want to redirect to a specific tab once some post actions are done, which works fine.
However, ever since I started using the code, all the other links stopped doing anything, it doesn't open the page or display an error, nothing at all.
Here's my code :
$(function() {
var gotoHashTab = function (customHash) {
var hash = customHash || location.hash;
var hashPieces = hash.split('?'),
activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');
}
// onready go to the tab requested in the page hash
gotoHashTab();
// when the nav item is selected update the page hash
$('.nav a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash
//location.hash = $(e.target).attr('href').substr(1);
scrollTo(0,0);
})
// when a link within a tab is clicked, go to the tab requested
$('.tab-pane a').click(function (event) {
if (event.target.hash) {
e.preventDefault();
gotoHashTab(event.target.hash);
}
})
$('.tab-pane a').on('click', function(e){
e.preventDefault()
})
});
I've noticed on some other questions, that e.preventDefault() may cause that, but when I comment those out nothing happens.
How to rewrite the code to keep functionality but make those normal links work again ?
It's looking at all the links with this:
activeTab = $('[href=' + hashPieces[0] + ']');
Change to:
activeTab = $('.tab-pane [href=' + hashPieces[0] + ']');
And also try being more specific with the .nav, since .nav is default for all navs. So this:
$('.nav a').on('shown.bs.tab', function (e) {
Should change to:
$('.tab-pane a').on('shown.bs.tab', function (e) {
I have a navigation menu which the style of the elements change if i click on them..they get the class "active".
I have a dropdown Menu in my navigation, how can i make it that the drop down title get the class and not only the elements at the dropdown. Here my page.
Here is the code for the navigation:
$('#content').children('section').not('#home').hide();
$('.active:has(a.anavigation-element)').not('.navbar-brand').not('#home').removeClass('active');
$(".a").click(function(e){
var $this = $(this);
e.preventDefault();
if ($(this).hasClass('navigation-element')){
var $target = $('#' + $(this).attr('href')).stop(true, true);
var $secs = $('#content > section').not($target).stop(true, true).filter(':visible');
if ($secs.length) {
$('.active:has(a.navigation-element)').not('.navbar-brand').removeClass('active');
$this.not('.navbar-brand').parent().addClass('active');
$secs.fadeOut(function () {
$target.fadeIn();
});
} else {
$this.not('.navbar-brand').parent().addClass('active');
$target.fadeIn();
}
} else if ($(this).hasClass('hide')){
$(this).parent().fadeOut();
}
});
Thank you for helping me!