0

我试图一次激活一个链接。在我拥有的代码上，如果我单击所有链接，它们都会被激活。我正在使用图像，一个用于默认，另一个用于悬停，另一个用于活动（三个不同的图像）不需要背景颜色。这三个图像的大小不同。我还需要激活第一个链接。我怎样才能做到这一点？

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; 
}
4

2 回答 2

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");
于 2012-06-03T22:08:59.413 回答
0

$('#navStandard li a').click()将模拟对该链接的点击。这就是你的意思“激活”吗？

于 2012-06-03T22:08:19.420 回答