我有包含许多标题的页面。我想每头转换成使用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标题后的超链接。
你可以使用.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>
你应该从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
如果使用的是引导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>