freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-o...

1.7 KiB

id title challengeType videoUrl forumTopicId
bad88fee1348bd9aedf08816 用 a 实现网页内部跳转 0 https://scrimba.com/p/pVMPUv/cyrDRUL 301098

--description--

a 元素还可以用来实现页面内不同区域的跳转,只需要把 a 元素的 href 值设置为井号 # 加欲跳转区域所对应的 id 属性值即可。id 是描述网页元素的一个属性,它的值在整个页面中唯一。

下面是用来创建内部 a 的例子:

<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>

当用户点击了 Contacts 链接,页面就会跳转到网页的 Contacts 区域。

--instructions--

请修改 href 属性值为 #footer 来将外部链接更改为内部链接,同时修改文本 cat photosJump to Bottom

移除 target="\_blank" 属性,这个属性的存在会让链接在新标签页中打开。

然后添加一个 <footer> 元素,并将它的 id 属性值设置为 footer

--hints--

页面中应只存在一个 a 元素。

assert($('a').length == 1);

页面中应只存在一个 footer 元素。

assert($('footer').length == 1);

ahref 属性值应为 #footer

assert($('a').eq(0).attr('href') == '#footer');

a 不应有 target 属性。

assert(
  typeof $('a').eq(0).attr('target') == typeof undefined ||
    $('a').eq(0).attr('target') == true
);

a 的内容文本应为 Jump to Bottom

assert(
  $('a')
    .eq(0)
    .text()
    .match(/Jump to Bottom/gi)
);

footer 元素的 id 属性值应为 footer

assert($('footer').eq(0).attr('id') == 'footer');

--solutions--