Question

我希望能够在用户点击菜单链接时播放jQuery动画。

在我的脚本中，我阻止链接的默认行为，在变量中保存锚标记的href属性的值，播放动画，然后将窗口重定向到与保存的href值对应的URL：

<script>
jQuery(document).ready(function($) {
$('.main-navigation a').click(function(event) {
    event.preventDefault();

    var href = this.href;

    $('#main').slideUp(500,
    function() {
        window.location = href;
    });
  });
});
</script>

问题是，导航菜单中的某些锚标签没有href属性，因为它们唯一的功能是在点击时打开子菜单。当我单击这些菜单项时，播放动画，然后重新加载同一页面。

我想从脚本的行为中排除没有href的锚标记。

我的解决方案是仅保存实际具有href属性的锚标记的href。除此之外，我不知道该怎么做。

所以，我的问题是：我应该如何用jQuery表达这个？

if (anchor tag has href attribute) {
   var href = this.href;
}

或许还有更好的解决方案？

Answer 1

而不是：

$('.main-navigation a').click

做：

$('.main-navigation a[href]').click

jQuery接受所有CSS选择器甚至更多！

此处为Bracket Selector的信息。

Answer 2

只需使用if来测试你的href的真实性：

var href = this.href;

if (href) {
  $('#main').slideUp(500,
  function() {
      window.location = href;
  });
}

Answer 3

将您的选择器更改为：

$('.main-navigation a[href]').click(function(event) {

如果锚标记包含href属性

3 个答案: