链接到另一个页面中的 anckor 标记不起作用答案

【问题标题】：Link to an anckor tag in another page does not work链接到另一个页面中的 anckor 标记不起作用
【发布时间】：2017-09-19 20:25:05
【问题描述】：

我在 page1(www.example.com/page2.html#idd) 中有一个链接指向 page2 中的锚标记当我点击 page1 中的链接（www.example.com/page2.html#idd）时，我只是转到 page2（www.example.com/page2.html）而不是 #idd。我认为“js”文件有问题，但我不知道是什么！

"index.js"

$('.form').find('input, textarea').on('keyup blur focus', function (e) {

var $this = $(this),
  label = $this.prev('label');

  if (e.type === 'keyup') {
        if ($this.val() === '') {
      label.removeClass('active highlight');
    } else {
      label.addClass('active highlight');
    }
  } else if (e.type === 'blur') {
    if( $this.val() === '' ) {
        label.removeClass('active highlight');
        } else {
        label.removeClass('highlight');
        }
  } else if (e.type === 'focus') {

  if( $this.val() === '' ) {
        label.removeClass('highlight');
        }
  else if( $this.val() !== '' ) {
        label.addClass('highlight');
        }
 }

});

$('.tab a').on('click', function (e) {

e.preventDefault();

$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');

target = $(this).attr('href');

$('.tab-content > div').show();

$(target).fadeIn(600);

});

这里是html文件：

"page1.html"


<div> <a href="example.com/page1.html#idd">click here</a>

"page2.html"

 <div id="idd">content......</div>

【问题讨论】：

Java 不是 JavaScript

标签： javascript html css

【解决方案1】：

那不是锚，那是div。这与 JavaScript 无关。（除非您正在编写 JavaScript 代码来模仿链接到页面上的锚点的行为，而您在显示的代码中似乎没有这样做。）

要直接转到锚点，它需要是具有预期名称的锚点：

<a name="idd">content......</a>

例如，您可以将这样的锚添加到您的div：

<div id="idd">
    <a name="idd">some label</a>
    content......
</div>

【讨论】：

【解决方案2】：

您不需要使用 javascript 而是一个简单的 HTML 代码。
在 page1.html 中： <a href="example.com/page2.html#idd">click here</a>
在 page2.html 中：<a name="idd"></a>

【讨论】：