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();
}
});
Related
I have this javascript code for switch between tabs:
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
document.querySelector('#videos').pause();
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
Each tab have one different video with the same ID and class. I need to stop them when a click into another tab.
This script only works with the first time I click a tab "a-link".
Any suggestions?
Thanks in advance ;-)
Solved!
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
var lampara = document.getElementById("video01");
var desplante = document.getElementById("video02");
var filon = document.getElementById("video03");
video01.pause();
video02.pause();
video03.pause();
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
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'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');
}
});
Hello i have created a multi level navigation in magento. Now i have a problem with the opening and closing of my menu. I want my menu to close the "active" Top Menu when the other Top Menu is clicked.
I cant seem to get this part correct.
Javascript:
jQuery(document).ready(function(jQuery) {
jQuery(".sub_category").hide();
jQuery(".sub_sub_category").hide();
jQuery('#product-nav li a').click(function () {
jQuery('#product-nav li a').removeClass('active');
jQuery(this).addClass('active');
});
jQuery('ul li.expanded a').each(function(i){
var subUl = jQuery(this).parent().find('ul'); //Get the sub ul.
jQuery(this).bind('click',function(e){
// Prevent the default action of the link
subUl.toggle();
}) ;
});
jQuery(".head_child").click(function(e) {
e.preventDefault();
});
jQuery('li:has(ul) > a').click(function(e) {
e.preventDefault();
});
var url = window.location.toString();
jQuery('ul li.expanded a').each(function(){
var myHref= jQuery(this).attr('href');
var subUl = jQuery(this).parent().find('ul'); //Get the sub ul.
if( url.match(myHref)) {
jQuery(this).addClass('activeElement')
subUl.toggle();
}
});
});
Please see my jsfiddle for the example of my code.
http://jsfiddle.net/wvEcF/1/