링크 (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에서는 ID로 대상을 타겟팅 할 수 있지만 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()이 링크에 클릭을 시뮬레이션합니다. 그게 당신이 "활성화"한다는 것을 의미합니까?