我有一个通过导航栏的jquery代码,所选链接周围有一个框。它仅适用于中间链接,而不适用于其他链接。有什么想法吗?提前谢谢。
navigation arrow starts
var $el, leftPos, newWidth,
$mainNav = $("#nav");
$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");
$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item a").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());
//scroll arrow
function update_location(){
$el = $('#nav').children('li.current');
leftPos = $el.position().left;
newWidth = $el.width();
$('#nav li:nth-child(4) a').addClass('button-style');
if(window.top.scrollY == 0)
{
setTimeout(function(){
$magicLine.stop().animate({
left: 8,
width: 355
});},1000);
$('#nav li:nth-child(4) a').removeClass('button-style');
}
else
{
setTimeout(function(){
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});},1000);
}
}
$('#magic-line').css('left', '-15px', 'width','411px');
$(window).scroll(function(){
update_location();
});
<div class="navbar-fixed-top navbar" >
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills pull-right" id="nav">
<li class="current_page_item" style="width: 355px;"><a href="#home" class="logo" style="display:block; width: 355px;"><img src="images/logo.jpg" class="current_page_item" width="355" alt="" /></a></li>
<li><a href="#vision">VISION</a></li>
<li><a href="#services">SCHOOLS</a></li>
<li><a href="#apply">REQUEST AN EVALUATION</a></li>
<li><a href="#how-it-works">HOW IT WORKS</a></li>
<li><a href="#contact-us">CONTACT US</a></li>
</ul>
</div>
</div>
</div>
leftPos = $el.position().left;
function update_location()
后出现错误
我认为您可能打算在此行上使用类current_page_item而不是当前:
$el = $('#nav').children('li.current');
$el是一个空的jQuery对象,所以el.position()是空的,因此无法读取null留下的属性。
这是因为:
$el = $('#nav').children('li.current');
返回空值。
尝试:
$el = $('#nav').children('li.current_page_item');