我不确定是不是因为我使用的是Wordpress,但是this.href
没有在包含它们的项目上返回href(例如在“contact”上它返回http://www.domain.net/undefined而不是{ {3}})。如果我删除脚本,导航加载href就好了。
这是JS
$(document).ready(function() {
$('#page-wrap').delay(500).fadeIn(1000);
$(".menu-item").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#page-wrap").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
这是php wordpress文件
<div id="nav_wrap">
<div id="nav"><?php wp_nav_menu( array( 'theme_location' => 'header-menu',) ); ?></div>
</div>
以下是wordpress以html格式返回的内容
<div id="nav_wrap">
<div id="nav"><div class="menu-main-container"><ul id="menu-main" class="menu"><li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="http://www.domain.net">Home</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a>Company</a>
<ul class="sub-menu">
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://www.domain.net/jobs/">Careers</a></li>
</ul>
</li>
<li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a>Portfolio</a>
<ul class="sub-menu">
<li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="http://www.domain.net/breweries/">Breweries</a></li>
</ul>
</li>
<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a>Retailer Resources</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a>Community</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://www.domain.net/contact/">Contact</a></li>
</ul></div></div>
</div>
答案 0 :(得分:2)
这是因为您在.menu-item
上运行的选择器是<li>
。它没有href属性。
您需要在<a>
标记中选择<li>
标记。这应该这样做:
$(".menu-item a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#page-wrap").fadeOut(1000, redirectPage);
});
这样做的好处与选择<li>
然后选择孩子<a>
的其他答案相比,这只会在用户点击实际链接时运行。其他人将在点击<li>
中的任何位置时运行,这取决于您的CSS,可能在实际链接空间之外。
答案 1 :(得分:1)
Menu item
未返回href,因为它是<li/>
。
您需要定位菜单项的<a>
子元素。
linkLocation = $(this).children('a').attr('href');
答案 2 :(得分:0)
将linkLocation = this.href;
更改为linkLocation = $(this).attr('href');
,如果不起作用,请尝试linkLocation = $(this).find('a').attr('href');
答案 3 :(得分:0)
由于你使用的是jQuery,你可能想要使用jQuery:
linkLocation = $(this).children('a').attr('href');
答案 4 :(得分:0)
您的href
媒体资源似乎只与<a>
代码相关联,但点击事件正在添加到<li>
代码中。将代码更改为$(".menu-item a").click ...