如何使用jQuery / JavaScript的每头转换成固定链接

问题描述 投票:0回答:3

我有包含许多标题的页面。我想每头转换成使用jQuery / JavaScript的各种各样的永久链接。

HTML代码:

$('h3').each(function() {
  var id = $(this).attr('id');
  if (id) { //To make sure the element has an id
    $(this).append($('<a/>', {
      href: '#' + $(this).attr('id'),
      text: '#'
    }));
  }
});
body {
  border: 1px dashed black;
  padding: 0.5em;
  text-align: center;
  padding-bottom: 100vh;
}

.borderedPara {
  height: 15em;
  border: 1px dashed red;
  padding: 0.5em;
  text-align: center;
}
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
  <h3 id="Heading1">1<sup>st</sup> Heading</h3>
  <div class="borderedPara">
    1<sup>st</sup> Paragraph Content
  </div>
  <h2 id="Heading2">2<sup>nd</sup> Heading</h2>
  <div class="borderedPara">
    2<sup>nd</sup> Paragraph
  </div>
  <h3 id="Heading3">3<sup>rd</sup> Heading</h3>
  <div class="borderedPara">
    3<sup>rd</sup> Paragraph
  </div>
  <a href="#Heading4">
    <div id="Heading4">4<sup>th</sup> Heading</div>
  </a>
  <div class="borderedPara">
    4<sup>th</sup> Paragraph
  </div>
</body>

</html>

最后锚定标题是想什么我。整个标题应该是点击。我得到当前的jquery标题后的超链接。

javascript jquery html5 permalinks html-heading
3个回答
2
投票

你可以使用.wrapInner ...

$(':header[id]').each(function() {
    var anchor = document.createElement('a')
    anchor.href = '#' + this.id
    $(this).wrapInner(anchor)
});
body {
  border: 1px dashed black;
  padding: 0.5em;
  text-align: center;
  padding-bottom: 100vh;
}

.borderedPara {
  height: 15em;
  border: 1px dashed red;
  padding: 0.5em;
  text-align: center;
}
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
  <h3 id="Heading1">1<sup>st</sup> Heading</h3>
  <div class="borderedPara">
    1<sup>st</sup> Paragraph Content
  </div>
  <h2 id="Heading2">2<sup>nd</sup> Heading</h2>
  <div class="borderedPara">
    2<sup>nd</sup> Paragraph
  </div>
  <h3 id="Heading3">3<sup>rd</sup> Heading</h3>
  <div class="borderedPara">
    3<sup>rd</sup> Paragraph
  </div>
  <a href="#Heading4">
    <div id="Heading4">4<sup>th</sup> Heading</div>
  </a>
  <div class="borderedPara">
    4<sup>th</sup> Paragraph
  </div>
</body>

</html>

0
投票

你应该从jQuery的API使用replaceWith

如果你想头标记转换为链接(像你一样的4头),

$('h3').each(function() {
  var id = $(this).attr('id');
  if (id) { //To make sure the element has an id
    $(this).replaceWith(function () {
      return $('<a/>', {
        id,
        href: '#' + $(this).attr('id'),
        text: $(this).text(),
      });
    });
  }
});

链接到jsFiddle

如果你想保持你的标题标签和环绕标题与链接标签

$('h3').each(function() {
  var id = $(this).attr('id');
  if (id) { //To make sure the element has an id
    $(this).replaceWith(function () {
      return $('<a/>', {
        href: '#' + $(this).attr('id'),
        html: `<h3 id=${id}>` + $(this).text() + '</h3>',
      });
    });
  }
})

链接到jsFiddle


-1
投票

如果使用的是引导4有像heading tags.h6, .h5 until .h1一类,使用它会很容易与anchor tag

    <a href="mydomain.com" class="h1">This is an anchor tag with an h1 class header</a>
© www.soinside.com 2019 - 2024. All rights reserved.