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()将模拟该链接上的点击。那是什么意思“激活”？

如何激活链接（jQuery）？

2 个答案: