如何激活链接（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()将模拟该链接的点击。这是你的意思是“激活”吗？