为什么HREF＃跳到主页而不是DIV ID

我想使用标签：

跳到HTML页面中的一个部分

<a href="#details">example</a>

章节ID：

<div id="details"></div>
<section id="viewad-details">

页面本身包含一个我需要保留的基本标签：

<base href=//domain.com/">

Doctype（非常古老的遗产）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

以某种方式这不起作用，单击链接加载主页，而不是跳到DIV ID。我还打算最初跳到该部分，但这具有相同的效果。

如何在将基本标签固定到位时如何实现此功能？

这与HTML5可行，如下所示：

：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<a href="#details">example</a>
<div id="ipsum" style="width: 200px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar maximus sem a condimentum. Nunc sapien arcu, mollis et diam eu, tempor euismod orci. Sed blandit, erat quis laoreet vehicula, diam ipsum tempor turpis, vel suscipit nisl urna euismod orci. Nulla rutrum efficitur nisi et molestie. Curabitur a sollicitudin justo. Curabitur nunc ligula, malesuada pharetra pulvinar vitae, maximus in nisl. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce rhoncus molestie turpis, quis gravida mauris dictum vel. Suspendisse semper est sed tortor pretium, eget tincidunt massa viverra. Donec et ullamcorper lorem. Cras posuere quam lorem, vitae fringilla diam posuere in. Vivamus et porta enim, ac hendrerit lacus.
Mauris non odio at odio elementum consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi non ligula feugiat, tincidunt risus sit amet, blandit elit. Sed eu fermentum purus. Nam maximus nunc elementum, fermentum neque sit amet, vulputate lorem. Sed nec urna quis nisi vulputate iaculis ac in nisl. Sed convallis leo vitae efficitur scelerisque. In dictum justo at diam convallis, ut sagittis neque cursus. Phasellus viverra, risus at cursus cursus, est tellus ullamcorper arcu, id pharetra ligula magna vel leo. Cras libero mi, aliquet a aliquam nec, euismod nec felis. Vivamus ac arcu id lectus ultricies tincidunt quis iaculis velit. Nam porttitor laoreet eros, eu laoreet massa fermentum a. Pellentesque cursus finibus leo, non interdum ligula.
</div>
<div id="details" style="background:beige;width:200px;height:200px;border:1px solid red">All the details</div>
<section id="viewad-details">
</body>
</html>

标题为"详细信息"的Div也滚动到HTML 4.01中的焦点。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Untitled</title>
</head>
<body>
<a href="#details">example</a>
<div id="ipsum" style="width: 200px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar maximus sem a condimentum. Nunc sapien arcu, mollis et diam eu, tempor euismod orci. Sed blandit, erat quis laoreet vehicula, diam ipsum tempor turpis, vel suscipit nisl urna euismod orci. Nulla rutrum efficitur nisi et molestie. Curabitur a sollicitudin justo. Curabitur nunc ligula, malesuada pharetra pulvinar vitae, maximus in nisl. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce rhoncus molestie turpis, quis gravida mauris dictum vel. Suspendisse semper est sed tortor pretium, eget tincidunt massa viverra. Donec et ullamcorper lorem. Cras posuere quam lorem, vitae fringilla diam posuere in. Vivamus et porta enim, ac hendrerit lacus.
Mauris non odio at odio elementum consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi non ligula feugiat, tincidunt risus sit amet, blandit elit. Sed eu fermentum purus. Nam maximus nunc elementum, fermentum neque sit amet, vulputate lorem. Sed nec urna quis nisi vulputate iaculis ac in nisl. Sed convallis leo vitae efficitur scelerisque. In dictum justo at diam convallis, ut sagittis neque cursus. Phasellus viverra, risus at cursus cursus, est tellus ullamcorper arcu, id pharetra ligula magna vel leo. Cras libero mi, aliquet a aliquam nec, euismod nec felis. Vivamus ac arcu id lectus ultricies tincidunt quis iaculis velit. Nam porttitor laoreet eros, eu laoreet massa fermentum a. Pellentesque cursus finibus leo, non interdum ligula.
</div>
<div id="details" style="background:cyan;width:200px;height:150px;border:1px solid red">All the details</div>
<section id="viewad-details">
</body>
</html>

然而，基本标签似乎是软膏中的众所周知的苍蝇。考虑以下代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Untitled</title>
<base href="https://www.example.com">	
</head>
<body>
<a href="#details">example</a>
<div id="ipsum" style="width: 200px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar maximus sem a condimentum. Nunc sapien arcu, mollis et diam eu, tempor euismod orci. Sed blandit, erat quis laoreet vehicula, diam ipsum tempor turpis, vel suscipit nisl urna euismod orci. Nulla rutrum efficitur nisi et molestie. Curabitur a sollicitudin justo. Curabitur nunc ligula, malesuada pharetra pulvinar vitae, maximus in nisl. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce rhoncus molestie turpis, quis gravida mauris dictum vel. Suspendisse semper est sed tortor pretium, eget tincidunt massa viverra. Donec et ullamcorper lorem. Cras posuere quam lorem, vitae fringilla diam posuere in. Vivamus et porta enim, ac hendrerit lacus.
Mauris non odio at odio elementum consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi non ligula feugiat, tincidunt risus sit amet, blandit elit. Sed eu fermentum purus. Nam maximus nunc elementum, fermentum neque sit amet, vulputate lorem. Sed nec urna quis nisi vulputate iaculis ac in nisl. Sed convallis leo vitae efficitur scelerisque. In dictum justo at diam convallis, ut sagittis neque cursus. Phasellus viverra, risus at cursus cursus, est tellus ullamcorper arcu, id pharetra ligula magna vel leo. Cras libero mi, aliquet a aliquam nec, euismod nec felis. Vivamus ac arcu id lectus ultricies tincidunt quis iaculis velit. Nam porttitor laoreet eros, eu laoreet massa fermentum a. Pellentesque cursus finibus leo, non interdum ligula.
</div>
<div id="details" style="background:#ffdede;width:200px;height:140px;border:1px solid red">All the details</div>
<section id="viewad-details">
</body>
</html>

由于基本标签的HREF值，所有相对URL被认为是在domain example.com的背景下。结果，#details不是指当前页面的一部分，而是url https：//www.example.com#details的片段。

这里建议的一种解决方案建议对锚标签使用绝对URL。这是在我的本地服务器上使用以下基础和锚定标签工作的方法：

<base href="https://www.example.com">
<!-- other HTML -->
<a href="http://localhost/exp/div401Base.html#details">eXample</a>

用户单击链接时，div有资格的详细信息滚动到当前页面的视图中，从而避免重定向到URL https：//example.com#details。

为了使链接使用#符号，该代码需要具有锚点链接的"名称"属性。

<a name="details"><section id="viewad-details"></a>

W3C将其定义为HTML锚标签的功能：

名称选修的。如果存在，则属性名称允许锚定为链接的目的地。属性的值是锚定的标识符。标识符是任意字符串，但在HTML文档中必须是唯一的。然后，另一个文档可以通过将标识符放置在地址后的标识符中，将标识符明确地引用，并由哈希符号分开。

这是一些示例

$(document).on('click', 'a[href^="#"]', function(event) {
  event.preventDefault();
  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top - 60
  }, 500);
});

.container {
  max-width: 900px;
  margin: auto;
}
header {
  text-align: center;
  background: #dcdcdc;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
header li {
  display: inline-block;
}
header li a {
  display: inline-block;
  font-size: 16px;
  color: #000;
  padding: 10px 20px;
}
section {
  min-height: 800px;
  padding: 30px;
  color: #fff;
  margin: 30px 0;
}
.section1 {
  background: #96CEB4;
}
.section2 {
  background: #FF6F69;
}
.section3 {
  background: #FFCC5C;
}

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
  <div class="container">
    <header>
      <ul>
        <li>
          <a href="#1">Section1</a>
        </li>
        <li>
          <a href="#2">Section2</a>
        </li>
        <li>
          <a href="#3">Section3</a>
        </li>
      </ul>
    </header>
    <section class="section1" id="1">
      <h1>Section1</h1>
    </section>
    <section class="section2" id="2">
      <h1>Section2</h1>
    </section>
    <section class="section3" id="3">
      <h1>Section3</h1>
    </section>
  </div>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：