I'm pretty new to jquery and I decided to build a jquery tabber. So far so good but I have a little problem!!! I cant see how I can activate the tabber based on the URL. For instance when the link is www.myweb.com#tab2, the second tabber becomes activated. My jquery is as follows.
$(document).ready(function() {
// When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
// On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
and HTML list as follows
<ul class="tabs">
<li>Design Team</li>
<li>Publications</li>
<li>Awards & Recognitions</li>
<li>Our Mission</li>
<li class="last-item">Company Profile</li>
</ul>
now when someone visit my website with this link www.mywebsite.com#tab3, I want tab3 to be activated. I know jquery tabber has this but I don't know how achieve this with my own jquery tabber. Any help will be greatly appreciated
Activate an item with href attribute equal to location.hash:
$(document).ready(function () {
var hash = location.hash;
$(".tab_content").hide(); //Hide all content
if ($("ul.tabs li a[href='" + hash + "']").length) { //check if such link exists
$("ul.tabs li a[href='" + hash + "']").parent().addClass("active"); //Activate tab
$(hash).show();
}
else {
$("ul.tabs li:first").addClass('active');
$(".tab_content:first").show()
}
}
Pretty simple. You can trigger click event based on your hash index.
This will work for you. If you refresh the page after clicking for say tab3 and your url contains hash index #tab3, your third tab will be focused automatically.
I assume that you have an id tab1, tab2, tab3, tab4 in your li or a tag and its viola.
Add these codes to your existing code without affecting them and you are done.
$(function(){
if(location.href.indexOf('#') != -1){
var namedAnchor = window.location.hash;
var findToTab = namedAnchor;
$(findToTab).trigger('click');
}
});
Edit:
How ever if you don't want to assign any ids to either li or a tag, you can do this.
$(function(){
if(location.href.indexOf('#') != -1){
var namedAnchor = window.location.hash;
var findToTab = namedAnchor;
$("ul.tabs li a[href='" + findToTab + "']").trigger('click');
}
});
Related
I have the following HTML menu:
<div class="nav">
<ul>
<li class="first">Home</li>
<li>Something</li>
<li>Else</li>
<li class="last">Random</li>
</ul>
<ul style="float:right;">
<li class="first last">News</li>
</ul>
</div>
</div>
And then I have this code:
jQuery(function($){
var current = location.pathname;
$('.nav ul li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})
The code is working great, but it has a problem. For example, if I see the Home page (www.example.com) then all of the menu links receives the active class. Another problem would be that it works great for www.example.com/something but it doesn't keep it active if I go to www.example.com/something/1 etc. Any idea how to fix this? Thanks in advance!
For home page add extra class 'default' in list like.
<li class="first default">Home</li>
jquery code.
jQuery(function($){
var current = location.pathname;
console.log(current);
//remove the active class from list item.
$('.nav ul li a').removeClass('active');
if(current != '/'){
$('.nav ul li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if(current.indexOf($this.attr('href')) !== -1 && $this.attr('href') != '/'){
$this.addClass('active');
}
})
}else{
console.log('home');
$('.default a').addClass('active');
}
})
Use the below jQuery code to add active class:
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/") + 1);
$(".nav ul li a").each(function() {
if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
$(this).addClass("active");
})
});
By using indexOf(), you are checking if the link's target is the same the current location.
What you want is not "the same URL" but "the same pattern", so I would tend to use a regular expression :
let re = new RegExp("^" + $(this).attr("href") + ".*");
if (re.test($current)) {
$(this).addClass("active");
}
Note that this would force you to create a separate solution for your link to the main page, else it would always be active.
Hello I already found this topic : jQuery tabs: how to create a link to a specific tab?
But that not resolve my problem,
here my code :
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
e.preventDefault();
yInitPos = $(window).scrollTop();
// On ajoute le hash dans l'url.
window.location.hash = $(this).attr("href");
return false;
});
});
I can't acces to a tab with link like this : http://127.0.0.1/admin.php#tab2
Can you help me ? Thanks
Try this below script, just made once change to the // on ajoute le hash dans
and added some code below the click function
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function(e) {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
e.preventDefault();
yInitPos = $(window).scrollTop();
// On ajoute le hash dans l'url.
// $(this) below will be <li> tag, so you have to get to the children <a> tag with href attr
window.location.hash = $(this).children().attr("href");
return false;
});
// the code below gets the hash(#) value from the url and finds the link with a href of this # value and triggers it
var tabId = window.location.hash;
console.log(tabId);
if(tabId !== "")
{
$(".tabs").find('a[href='+tabId+']').click();
}
});
I need change this Function
$(document).ready(function () {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function () {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
to work like:
if click and activeTab == "#a" load information from some file, like
$('#a').load('a.php?'+ Math.random());
if click and activeTab == "#b" load information from
$('#b').load('b.php?'+ Math.random());
i tried but not work to me, here is the example on JSFiddle.net
Thanks
I get a load error when I do this, so it would probably work if the page actually exists.
$(activeTab).fadeIn(300, function(){
$(this).load($(this).attr("id")+".php?"+Math.random());
});
I cant figure out what I am doing wrong. Here is a link to see example.
http://atozcognac.com/hotel/form/#
My prev and next buttons work but I can't figure out how to change tabs as well if user press prev or next.
Thank you for your time.
$(document).ready(function(){
//When someone clicks on the navigation links
$('.nav li').click(function(e){
$('.nav li').attr('id', ''); //make all navtabs inactive
$(this).attr('id', 'activetab'); //make the one we clicked active
//hide all of the fieldsets
$('fieldset').attr('class', 'myHidden');
whichitem=$(this).attr('title'); //get the title of the nav we clicked
//make the class of what we cleared not hidden
$("fieldset[title='"+whichitem+"']").attr('class', '');
});
//When someone clicks on the previous button
$('.prev').click(function(e){
var listItem = document.getElementById('activetab'); //find out which navtab is active
whichOne=$('li').index(listItem); //get the index of the navtab
$('.nav li').attr('id', ''); //make all the navtabs inactive
$(".nav li:eq("+(whichOne-1)+")").attr('id', 'activetab'); //make previous tab active
$('fieldset').attr('class', 'myHidden'); //hide all the fieldsets
$("fieldset:eq("+(whichOne-1)+")").attr('class', ''); //show the previous fieldset
});
//When someone clicks on the next button
$('.next').click(function(e){
var listItem = document.getElementById('activetab'); //find out which navtab is active
whichOne=$('li').index(listItem); //get the index of the navtab
$('.nav li').attr('id', ''); //make all the navtabs inactive
$(".nav li:eq("+(whichOne+1)+")").attr('id', 'activetab'); //make next tab active
$('fieldset').attr('class', 'myHidden'); //hide all the fieldsets
$("fieldset:eq("+(whichOne+1)+")").attr('class', ''); //show the next fieldset
});
});
You can trigger the click event and use the logic you've already implemented in the click listener. And I would use a class activetab instead of an id.
$(document).ready(function(){
//When someone clicks on the navigation links
$('.nav li').click(function(e){
$('.nav li').removeClass("activetab"); //make all navtabs inactive
$(this).addClass("activetab"); //make the one we clicked active
//hide all of the fieldsets
$('fieldset').addClass("myHidden");
var whichitem=$(this).attr('title'); //get the title of the nav we clicked
//make the class of what we cleared not hidden
$("fieldset[title='"+whichitem+"']").removeClass("myHidden");
});
//When someone clicks on the previous button
$('.prev').click(function(e){
// trigger the click
$(".activetab").prev().click();
});
//When someone clicks on the next button
$('.next').click(function(e){
// trigger the click
$(".activetab").next().click();
});
});
I want to make a menu, and change the class when clicking.
When i click on the "li" with no class="active", i want jquery to add a class on the empty <li> and remove it from the othes "li".
<li class="active">data</li>
<li>data 2</li>
can somebody help me ? :)
I think you mean this:
$('li > a').click(function() {
$('li').removeClass();
$(this).parent().addClass('active');
});
// When we click on the LI
$("li").click(function(){
// If this isn't already active
if (!$(this).hasClass("active")) {
// Remove the class from anything that is active
$("li.active").removeClass("active");
// And make this active
$(this).addClass("active");
}
});
$('li').click(function()
{
$('li', $(this).parent()).removeClass('active');
$(this).addClass('active');
}
$(window).load(function(){
page=window.location.pathname.split("/").pop();
menuChildren = $('a[href="' + page + '"]');
$(menuChildren).parent('li').addClass('active');
});
The above code will look up the url and pop out the last element (Which is the file name). Then it finds the anchor tag with href attribute which has the same value of the url then it puts an active class for its parent li tag
This should get you close.
$("li").click(function() {
$("li").removeClass("active");
$(this).addClass("active");
});