这对我来说很难解释,所以我会尽力而为。这是这段代码:
$('#navibar a').hover(function(){
var position = $(this).position();
var width = $(this).width();
$('#underliner').css({'width': '' + width + '','left': position.left});
//$('#underliner').show("slide", { direction: "left" }, 100);
$('#underliner').stop().animate({opacity: 1}, 30).show();
}, function () {
var homePos = $(this).find(attr(activePageHref)).position();
var homeWidth = $(this).find(attr(activePageHref)).width();
//$('#underliner').css({'width': '' + homeWidth + '','left': homePos.left});
//$('#underliner').show("slide", { direction: "left" }, 100);
//$('#underliner').stop().animate({opacity: 1}, 30).show();
alert(activePageHref);
});
activePageHref 在此之外设置为已被点击的页面。在警报中,它显示正确(例如,假设它的值为“home”。我需要以某种方式将#underliner.css 位置和宽度设置为悬停时选择的导航中的页面链接,所以有没有办法“找到”其他 'a' 并使用它们?希望在代码中很明显我正在尝试做什么。这是我的标记:
<ul id="navibar">
<li><a href="home">Home</a></li>
<li><a href="products">Products</a></li>
<li><a href="games">Games</a></li>
<li><a href="store">Store</a></li>
<li><a href="support">Support</a></li>
<li><a href="community">Community</a></li>
</ul>
此外,我知道第一段代码大错特错,那是我决定在这里发布之前出于愤怒和绝望所做的最后一件事。
最佳答案
使用属性选择器找到href为activePageHref的链接
$('#navibar a').hover(function(){
var position = $(this).position();
var width = $(this).width();
$('#underliner').css({'width': '' + width + '','left': position.left});
//$('#underliner').show("slide", { direction: "left" }, 100);
$('#underliner').stop().animate({opacity: 1}, 30).show();
}, function () {
var homePos = $(this).parents('#navibar').find('a[href="'+activePageHref+'"]').position();
var homeWidth = $(this).parents('#navibar').find('a[href="'+activePageHref+'"]').width();
//$('#underliner').css({'width': '' + homeWidth + '','left': homePos.left});
//$('#underliner').show("slide", { direction: "left" }, 100);
//$('#underliner').stop().animate({opacity: 1}, 30).show();
alert(activePageHref);
});
关于javascript - 我需要在悬停时使用选择器并在悬停外使用变量集来查找特定链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11553477/