Question

我正在内部平台上工作，因此创建跳过导航元素的唯一方法是使用jQuery。我毫不费力地创建链接以及目标div（紧随标题之后）。我已经添加了JS来解决与创建的链接有关的事件委托问题，但是当click事件触发（已通过日志测试）时，它仍然不会跳到新创建的元素#skipTarget。另外，我们的网站使用基本网址，这就是为什么链接只是“ #skipTarget”的原因。我在做什么错了？

这是我的JS代码段：

$(document).ready(function() {
  const skipNav = $('<a id="skip-nav" alt="Skip to Content">');
  const skipSearch = $('<a id="skip-search" alt="Skip to Inventory">');
  let contentLink = window.location.pathname;
  if (contentLink == '/') {
    contentLink = '';
  }
  const skipTarget = $('<div id="#skipTarget" tabindex="-1">');
  $('body > header').after(skipTarget);
  skipNav.text('Skip to Main Content');
  skipNav.attr('href', contentLink + '#skipTarget');
  $('body > header').prepend(skipNav);
  skipSearch.text('Skip to Inventory');
  skipSearch.attr('href', contentLink + '#inventory-listing');
  $('aside#refine-search').prepend(skipSearch);

  $('header').on('click', '#skip-nav', function(event) {
    console.log('test:', event);
    console.log('contentLink: ', contentLink);
  });
});

#skip-nav,
#skip-search {
  z-index: -999;
  position: absolute;
  color: transparent;
  padding: 3px;
}

#skip-nav:active,
#skip-nav:focus,
#skip-search:active,
#skip-search:focus {
  z-index: 999;
  background: black;
  color: white;
}

<body>

<header>
  <a id="skip-nav" href="#skipTarget">Skip to Main Content</a>
  
  <div>header content and menus to skip</div>
  
</header>

<div id="#skipTarget" tabindex="-1"></div>

</body>

感谢您的帮助

Answer 1

我简直不敢错过，但这只是一个错字。在定义skipTarget时，我将其设置为id =＃skipTarget而不是id = skipTarget。谢谢大家的关注。

使用jQuery创建的元素跳至内容

1 个答案: