this.href not returning href
this.href not returning href
我不确定这是否是因为我正在使用 Wordpress,但this.href
没有返回具有它们的项目的 href(例如在"联系人"上,它返回 http://www.domain.net/undefined 反对 http://www.domain.net/contact(。如果我删除脚本,导航会很好地加载 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>
这是因为您正在.menu-item
上运行选择器,这是一个<li>
。它没有 href 属性。
您需要在<li>
标签中选择<a>
标签。这应该这样做:
$(".menu-item a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#page-wrap").fadeOut(1000, redirectPage);
});
与选择<li>
然后选择子<a>
的其他答案相比,这样做的好处是,这只会在用户单击实际链接时运行。当单击<li>
中的任何位置时,其他将在运行,具体取决于您的 CSS,这可能在实际链接空间之外。
js小提琴与工作示例
>Menu item
没有返回 href,因为它是一个<li/>
。
您需要定位菜单项的<a>
子元素。
linkLocation = $(this).children('a').attr('href');
将linkLocation = this.href;
更改为linkLocation = $(this).attr('href');
,或者如果这不起作用,请尝试linkLocation = $(this).find('a').attr('href');
既然你使用的是jQuery,你可能想去所有的jQuery:
linkLocation = $(this).children('a').attr('href');
看起来您的 href
属性仅与<a>
标记相关联,但 click 事件正在添加到<li>
标记中。将代码更改为$(".menu-item a").click ...
- 在单击href链接的同时下载文件
- 如果href包含X,请更改href
- 锚点元素的href属性自动更改
- 锚点元素不't使用svg时,请打开EDGE上的href
- 检测电话窃听,即:<a href="电话:xxx">在UIWebview上
- 如何覆盖锚点元素's href目标,并在我点击转到目标javascript时删除其他错误
- Href:当前DIV中的目标ID
- href属性内的javascript函数
- ng绑定和ng href问题.ng href未从控制器加载数据
- 如何将href设置为不同的值
- 如何提取“;href"最近列表项中的属性值
- CKEditor如何允许href="javascript:void(0)"在小部件中
- noty.js is returning undefined
- 渲染”;a“;React.js中的可选href
- 在类似Facebook的社交墙中添加href
- D3 Javascript HREF链接替换
- 点击href在谷歌地图中加载位置
- 如何在javascript中的某个按钮上更改href的值
- 我可以使用location.href为变量生成url吗
- this.href not returning href