Question

我正在尝试将我的移动菜单链接到主页上的不同部分。这是一个单页网站。链接不起作用。我的手机菜单代码出了什么问题？谢谢！

```

<nav id="menu">
    <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="index.html#targetabout">About Us</a></li>
        <li><a href="index.html#targetservices">Services </a></li>
        <li><a href="index.html#targetcontact">Contact</a></li>
     </ul>
 </nav>

```

Answer 1

您需要删除href中的index.html，否则它将重新加载页面。

设置要链接到的元素的ID：

<a href="#about-section">About</a>

和

<section id="about-section">...

Answer 2

如果所有内容都在一个页面上，您可以省略页面名称，即使用

<a href="#targetabout">

而不是

<a href="index.html#targetabout">

如果链接元素的标识为#about，请不要使用#targetabout，而应使用#about，例如<a href="#about">

Answer 3

不要在链接的href中包含“index.html”，否则它会重新加载页面。它应该只是<a href="#about">，<a href="#services">等。我不知道为什么你用“目标”开头，这是没有必要的。这些都应该与页面正文中的<a name>标记相对应。由于这是一个单页网站，<nav>只出现一次，因此您无需继续链接到index.html。

<nav id="menu">
    <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="#about">About Us</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

<a name="about"><h2>About Us</h2></a>

<!-- your page here -->

<a name="services"><h2>Services</h2></a>

<!-- and so on.... -->

<a name="contact"><h2>Contact</h2></a>

这些<a>代码，没有href且只有name，不会以任何方式直观地影响其内容。它只是一种“书签”，用于指定要跳转到页面的位置。例如，您无法单击它们，并且它们与常规文本没有任何不同。你可以使用它，它可以工作（和看起来）完全一样。

<a name="about"></a> <h2>About Us</h2>

<a name="services"></a> <h2>Services</h2>

此技术也适用于跳到页面顶部以及向下跳跃。

Answer 4

有点晚了，但是...

如果您使用jQuery mobile，则这是预期的行为（请参阅移动文档）。因此，您必须自己滚动到该部分：

<script language="JavaScript" type="text/javascript">
function getAnchor() {
    return (document.URL.split('#').length > 1) ? document.URL.split('#')[1] : null;
}

function scrollTo(hash) {
    if (hash){
        location.hash = "#" + hash;
    }  
}
scrollTo(getAnchor());
</script>

为什么我的HTML链接不起作用？

4 个答案: