Question

我网页中的所有h1标签都包含自定义工具提示和锚点（使用jquery添加）。 html看起来像这样：

<h1 id="heading1">
<span>
Intro
<div class="tooltip">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" readonly="readonly" value="http://someurl/somemore/#heading1">
</div>
</div>
<a href="http://someurl/somemore/#heading1" class="anchor"><i class="icon-chain-link">#</i>
</a>
</span>
</h1>

对于隐藏工具提示和锚之后的小型设备，我想将h1中的字符串转换为具有标题的本地链接的锚链接。我想要这样的东西：

<h1 id="heading1">
<span>
<a href="http://someurl/somemore/#heading1">Intro</a>
<div class="tooltip">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" readonly="readonly" value="http://someurl/somemore/#heading1">
</div>
</div>
<a href="http://someurl/somemore/#heading1" class="anchor"><i class="icon-chain-link">#</i>
</a>
</span>
</h1>

不幸的是直到现在我还没有找到一种方法来单独定位文本字符串和我使用的jquery wrapInner（）方法，包装了h1中的所有元素。这是我的代码，直到现在：

//the function to hide the tooltip, the anchor and convert the h1 to link 
function makeResponsive(){
if ($(window).width() < 780) {
    $('h1').wrapInner('<a href="'+ this.href +'"></a>');
    $('div.tooltip').css('display', 'none');
    $('a.anchor').hide();

} else {
    $('a.anchor').show();
}
}

//run on document load and on window resize
$(document).ready(function () {

//on load
makeResponsive();

//on resize
$(window).resize(function(){
    makeResponsive();
});

});

这是一个带有额外h2标签的working example。 第一个问题：我无法将h标记中的ID设置为location.hash 第二个问题：只想将h标记的文本字符串转换为链接

Answer 1

如果代码包含id属性，则您不需要锚点。

如果此页面http://www.example.com/page1.html包含<section id="general_information">标记，则您需要直接链接到该部分的链接就像<a href="http://www.example.com/page1.html#general_information">...</a>

这样的链接

Answer 2

以下示例是您忘记了这一部分：

$('a.anchor').click(function(event) {
  event.stopPropagation();
  var thistool = $(this).parent().find('div.tooltip');
  $('div.tooltip').not(thistool).hide();
  thistool.toggle();
  thistool.find('input').select();
});

$('.icon-decline').on('click', function() {
  $(this).parent().hide();
});

$('div.tooltip').on('click', function(event) {
  event.stopPropagation();
});

$(document).on('click', function() {
  $('div.tooltip').hide();
});

演示：https://jsfiddle.net/hmyf4mp7/4/

Answer 3

所以这是我的解决方案：

      if ($(window).width() < 780) {
          $('h1 > span, h2 > span, h3 > span').each(function() {
          window.location.hash = this.parentElement.id;//set the local id as hash
          $(this).contents().eq(0).wrap('<a class="native" href="' + window.location.hash + '"></a>');
    });//get ONLY the text within the h tags and wrap it with a tags that have the local hash

在width代码中每780px span小于h的设备中，我将哈希值设置为其父代的id。然后我获得span的第一个内容，即text，并用a包装，其中包含该位置的完整网址。

在width超过780px的设备中，我只找到并打开包装文本的a标记。

} else {
    $('a.native').contents().unwrap();
  }

这是一个包含完整代码的Demo。

将所有标题转换为锚链接

3 个答案: