如何激活鏈接（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()將模擬該鏈接的點擊。這是你的意思是「激活」嗎？