Question

I’m trying to activate one link at a time. On the code I have, if I click on all links, all of them get activated. I’m using images, one for default, another image for hover and another one for active (three different images) no background colors are needed. These three images are different sizes. I also need the first link to be activated. How can I do this?

HTML:

<ul id="navStandard">    
<li class="a"><a href="#"></a></li>
</ul>

<ul id="navQuick">
<li class="a"><a href="#"></a></li>
</ul> 

<ul id="navSurvey">
<li class="a"><a href="#"></a></li>
</ul>

jQuery:

$('#navStandard li').append('<div class="hover" />');
$('#navStandard li').hover(function() {
    $(this).children('div').stop(true, true).fadeIn('1000');
}, function() {
    $(this).children('div').stop(true, true).fadeOut('1000');
}).click(function() {
    $(this).addClass('selectedStandard');
});


$('#navQuick li').append('<div class="hover" />');
$('#navQuick li').hover(function() {
    $(this).children('div').stop(true, true).fadeIn('1000');
}, function() {
    $(this).children('div').stop(true, true).fadeOut('1000');
}).click(function() {
    $(this).addClass('selectedQuick');
});


$('#navSurvey li').append('<div class="hover" />');
$('#navSurvey li').hover(function() {
    $(this).children('div').stop(true, true).fadeIn('1000');
}, function() {
    $(this).children('div').stop(true, true).fadeOut('1000');
}).click(function() {
    $(this).addClass('selectedSurvey');
});

CSS:

#navStandard {
width: 115px;
height: 72px;
margin-right: 0px;
margin-bottom: 0px;
    margin-top: 1px;
padding: 0px;
 }
#navQuick {
width: 100px;
height: 73px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 1px;
padding: 0px;

}
#navSurvey {
width: 110px;
height: 73px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 1px;
padding: 0px;

}

#navStandard li{
float:left;
 width:115px;
height:72px;
    position:relative;
   background-image: url(standard-img.jpg); 
background-repeat: no-repeat;
background-position: center center;
display: inline;
 }
 #navStandard li a{
  z-index:20; 
display:block;
width: 120px;          
height:72px;        
position:relative;
}
#navStandard li .hover {
position:absolute;
width:115px;
height:72px;
z-index:0;
left:0;
top:0;

display:none;
background-image: url(over-standard.jpg);
background-repeat: no-repeat;
background-position: center center;

 }
#navStandard li.selectedStandard {
background-image: url(active-standard.jpg);
background-repeat: no-repeat;
background-position: center center; 
}


#navQuick li{
 float:left; 
 width:100px;
 height:72px;     
    position:relative;
    background-image: url(quick-img.jpg); 
background-repeat: no-repeat;
background-position: center center;
display: inline;
}
#navQuick li a{
z-index:20; 
display:block;
width: 100px;          
height:72px;        
position:relative;
}
#navQuick li .hover {
position:absolute;
width:100px;
height:72px;
z-index:0;
left:0;
top:0;
display:none;
background-image: url(over-quick.jpg);
background-repeat: no-repeat;
background-position: center center;

}
#navQuick li.selectedQuick {
background-image: url(active-quick.jpg);
background-repeat: no-repeat;
background-position: center center; 
}

#navSurvey {
width: 110px;
height: 72px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 1px;
padding: 0px;

}
#navSurvey {
width: 110px;
height: 72px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 1px;
padding: 0px;

}


#navSurvey li{
float:left; 
 width:110px;
height:72px;    
    position:relative;
    background-image: url(survey-img.jpg); 
background-repeat: no-repeat;
background-position: center center;
display: inline;
}
#navSurvey li a{
z-index:20;
   display:block;
   width: 110px;          
   height:72px;        
   position:relative;
   }
#navSurvey li .hover {
position:absolute;
width:110px;
height:72px;
z-index:0;
left:0;
top:0;
display:none;
background-image: url(over-survey.jpg);
background-repeat: no-repeat;
background-position: center center;

}
#navSurvey li.selectedSurvey {
background-image: url(active-survey.jpg);
background-repeat: no-repeat;
background-position: center center; 
}

Answer 1

If you are trying to only one link active, you will need to remove the selected state from all the other li elements before you add the selected to the one user clicked on.

Something along the lines of

$('#navSurvey li').hover(function() {
    $(this).children('div').stop(true, true).fadeIn('1000');
}, function() {
    $(this).children('div').stop(true, true).fadeOut('1000');
}).click(function() {
    $("#navStandard li").removeClass('selectedStandard');
    $("#navQuick li").removeClass('selectedQuick');
    $(this).addClass('selectedSurvey');
});

However, I suggest you have a generic selected state rather than specific for each element. In your CSS, you will be able to target them with the Id, but it will keep your JS cleaner and less repetitive. For example

$('ul li').hover(function() {
    $(this).children('div').stop(true, true).fadeIn('1000');
}, function() {
    $(this).children('div').stop(true, true).fadeOut('1000');
}).click(function() {
    $("ul li").removeClass('selected');
    $(this).addClass('selected');
});

You will be able to trigger the anchor click using JQuery trigger

$("#navStandard li a").trigger("click");