Как активировать ссылку (jQuery)?

Question

Я пытаюсь активировать одну ссылку за раз. В коде, который у меня есть, если я нажимаю на все ссылки, все они активируются. Я использую изображения, по умолчанию, другое изображение для зависания, а другое для активных (три разных изображения) не требует цветов фона. Эти три изображения имеют разные размеры. Мне также нужна первая ссылка для активации. Как я могу это сделать?

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

Если вы пытаетесь активировать только одну ссылку, вам нужно будет удалить выбранное состояние из всех остальных элементов li, прежде чем добавлять выбранные к одному пользователю, нажав на.

Что-то вдоль линий

$('#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'); 
}); 

Однако, я полагаю, у вас есть родовое выбранное состояние, а не конкретные для каждого элемента. В вашем CSS вы сможете настроить таргетинг на них с помощью идентификатора, но он сохранит ваш JS более чистый и менее повторяющийся. Например

$('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'); 
}); 

Вы сможете вызвать якорный нажмите с помощью Jquery триггер

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

Answer 2

$('#navStandard li a').click() будет имитировать нажатие на эту ссылку. Это то, что вы подразумеваете под «активацией»?