Develop Reference

How to set active class to multiple tabs in one page onclick?

I have multiple tabs in one page and having trouble in setting up an active class to the selected menu. It's working great if I only have one set of tab. If I click on the first tab menu, the 2nd tab menu will lose its active class. Also the fade in effect is not workin. Please help. thank you. Fiddle here.
$(".tabs a").click(function() {
$(".tabs a").parent().removeClass("active");
$(this).parent().addClass("active").fadeIn('slow');
});

Do it like this
$(".tabs a").click(function(e) {
e.preventDefault();
var p = $(this).closest('.tabs');
var i = '#'+$(this).attr('data-tab');
$(this).closest('ul').find('li').removeClass("active");
$(this).parent().addClass('active');
$(p).find('.tabInner div').hide();
$(p).find(i).fadeIn('slow');
});
JFIDDLE EXAMPLE

Try this to fix the selection of the tabs:
$(".tabs a").click(function () {
$(this).closest('ul').find('li').removeClass("active");
$(this).parent().addClass("active").fadeIn('slow');
$(this).closest('ul').next(".tabInner").find("div").eq($(this).parent().index()).hide().fadeIn('slow');
});
jsFiddle example

Highlighting Links while using nav arrows

I have a question similar to others on here but those didn't help because they referred to list links while these are not lists.
I have a horizontally sliding site. When you click the links at the top, they highlight according to what page it is sliding to. However, if you use the left and right nav arrows, the links don't highlight properly. It just stays highlightted on the last link that was clicked. I was wondeering if anyone could show me what I am doing wrong. I want the correct link to be highlighted even when the nav arrows are being used.
Here is the script on jsfiddle: http://jsfiddle.net/LD9YS/13/
And here is one of my failed attempts... (please don't try to figure out what I was doing here... I have no idea of this myself)
$(".arrow-right").click(function(){
prevA.removeClass("active");
prevA = $(A[index]).addClass("active");
});
It's painfully obvious that I haven't the first clue how to do this but at least i gave it a few attempts. I wanted to show more of my attempts but they were so obsurd that I can not even remember what I had done on those.
Can someone please help? If someone can't help with this, Im ready to just give up on it.

You'd do that like so
$('.arrow-left').on('click', function (e) {
e.preventDefault();
$('.tabs .active').prev().trigger('mousedown');
});
$('.arrow-right').on('click', function (e) {
e.preventDefault();
$('.tabs .active').next().trigger('mousedown');
});
FIDDLE

Here is what you should do:
$('.arrow-left').on('click', function(e){
e.preventDefault();
mySwiper.swipePrev();
$(".tabs .active").removeClass('active');
$($('.tabs a')[mySwiper.activeIndex]).addClass('active');
})
$('.arrow-right').on('click', function(e){
e.preventDefault();
mySwiper.swipeNext();
$(".tabs .active").removeClass('active');
$($('.tabs a')[mySwiper.activeIndex]).addClass('active');
})

This would work for right arrow...
$('.arrow-left').on('click', function(e){
e.preventDefault()
var current = $('.tabs').find('a.active').index();
if(current!= $('.tabs').find('a:first').index()){
$('.tabs a').removeClass('active');
$('.tabs a').eq(current-1).addClass('active');
}
mySwiper.swipePrev()
})
The same for left arrow
$('.arrow-right').on('click', function(e){
e.preventDefault()
var current = $('.tabs').find('a.active').index();
if(current!= $('.tabs').find('a:last').index()){
$('.tabs a').removeClass('active');
$('.tabs a').eq(current+1).addClass('active');
}
mySwiper.swipeNext()
})

Create a menu with click and hover functionalty using Jquery

I'm trying to add both click and hover functionality to a menu. My existing Javascript that activates the menu drop down on click is:
<script type="text/javascript">
$(document).ready(function () {
$('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});
</script>
I tried to use jquery to add simultaneous hover triggering by putting into the head of the page:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>$("#nav").bind("click hover", fn);</script>
amongst other things, and predictably none of them worked. I clearly have no idea what I'm doing! The working page without the jquery additions is here and the menu is down the left hand side of the page. If anyone can spare me advice it would be much appreciated!

Try updating to latest Jquery, and then read about on:
.on( events [, selector] [, data], handler(eventObject) )
events: One or more space-separated event types and optional namespaces,
such as "click" or "keydown.myPlugin".
So basically I think you can exchange .click for .on, and use events click mouseover.
Edit
In your source page the Jquery version is 1.4.2, just for noticing.

You can use a pre-built solution instead of creating your own solution from scratch.
See Superfish - http://users.tpg.com.au/j_birch/plugins/superfish/.
Superfish is a jQuery plugin that handles click/hover dropdown menus.
For a css-only drop-down menu, search "Suckerfish". Superfish can be used on top of suckerfish for graceful degradation in case the user does not have javascript enabled.

I found this worked the best for my needs:
`<script type="text/javascript">
$(function(){
$('#nav > li > ul')
.hide()
.click(function(e){
e.stopPropagation();
});
$('#nav > li').toggle(function(){
$(this)
.removeClass('waiting')
.find('ul').slideDown();
}, function(){
$(this)
.removeClass('waiting')
.find('ul').slideUp();
});
$('#nav > li').hover(function(){
$(this).addClass('waiting');
setTimeout(function(){
$('#nav .waiting')
.click()
.removeClass('waiting');
},600);
}, function(){
$('#nav .waiting').removeClass('waiting');
});
});
</script>`
#Niloct helped me find a way to close the sub-menu of the previously triggered menu item but it resulted in the menu being a bit impractical. Thanks!

adding and removing class and preventig fadeTo

I have created 3 links which when hovered over fade, I have also added a click event that when clicked adds the class 'active' and then i want to remove the class when clicked again. I have read a few posts that seem to suggest that removeClass come before addClass but im not sure why. Also when I click the link and the addClass is implemented I would also like to disable the fadeTo on this?
If anyone could explain each of these processes that would be great as Im trying to learn jQuery.
Code is here http://jsfiddle.net/kyllle/FtUdN/

Try this for the click:
$('#nav li a').click(function(){
$(this).toggleClass('active')
});
Fiddle: http://jsfiddle.net/maniator/FtUdN/3/

Click here to see a working demo: http://jsfiddle.net/rVhte/
$('#nav li a').toggle(
function() {
$('.active').removeClass('active');
$(this).addClass('active');
$("#nav li a").unbind('mouseenter mouseleave');
}, function() {
$(this).removeClass('active');
$('#nav li a').hover(function() {
$(this).fadeTo(200, 0.5).end();
}, function() {
$(this).fadeTo(200, 1.0).end();
});
});
Edit: disabled mouseover events after a link is clicked

You can use the .toggleClass method. In your hover handlers, you can use the hasClass method to check if you should fade or not.
Updated fiddle: http://jsfiddle.net/rfvgyhn/FtUdN/13/

click li, go to next li

Can't find a simple solution to this, I know it's easy and I've tried a few things but I can't quite get it to work. I'm currently working with a sidescrolling site and I want every time you click an image (contained in an li) it scrolls to the next li. I have jQuery plugin localscroll so it smoothly goes from one to the next, and that's working. I need to now write a code that triggers jQuery to utilize the localscroll function and go to the next li. Right now I have this, but I know it's not right:
$(document).ready(function () {
$('.wrapper ul li').click(function() {
$(this).next(li).localScroll();
});
});

Accoding to the ScrollTo examples, you need to do this:
$(container).scrollTo(element);
e.g.
$(document).ready(function () {
$('.wrapper ul li').click(function() {
$(window).scrollTo($(this).next('li'));
});
});

After reading the documentation for this here, I figured out the correct of way of using it. Let us say, you the .wrapper element as the one overflowing or in which you want to scroll. You can do the following.
$(document).ready(function () {
var gallery = $('.wrapper ul li')
$(gallery).click(function() {
$('.wrapper').localScroll({
target:$(this).next('li')
});
});
});