Question

请考虑以下HTML代码段：

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <nav>
            <a href="" id="menu-icon"></a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </body>
</html>

和各自的CSS代码段（styles.css）：

#menu-icon {
    width: 40px;
    height: 40px;
    background-color: blue;
}

a#menu-icon:hover {background-color: black;}

#menu-icon {display:inline-block;}

nav ul {
    display: none;
    position: absolute;
    padding: 20px;
    border: 1px solid black;
    right: 20px;
    top: 60px;
    width: 50%;
}

nav:hover ul {display: block;}

基本上，这是一个简单的导航栏，适用于桌面和移动设备。但是，在移动设备中使用时会出现问题：触摸图标后菜单会消失。

为了解决此问题，有必要将行<a href="" id="menu-icon"></a>更改为<a href="#" id="menu-icon"></a>。

问题
这种行为有望吗？为什么？它的原因是什么？

Answer 1

如果您当前的页面不是主页（例如，localhost:8888/foo.html而不是localhost:8888/），则点击/触摸<a href="" id="menu-icon"></a>后，它会将您重定向回主页主页（例如localhost:8888/）。

当您放置＃<a href="#" id="menu-icon"></a>时，您会注意到您不会被重定向，只需将＃添加到URL的末尾（用于锚链接）。因此，您的内容保持不变。

误以为href=""不会重定向您，但它实际上等同于href="/"。如果您不希望它重定向，您只需删除href或只使用其他标记，例如<span>。

Answer 2

就像其他人声称将href标记留空一样，实际上仍会将用户重定向到根目录。这已在其他地方被问过，你可以在这里得到一个很好的答复：Is an empty href valid?

任何时候你在页面上有一个你想要点击的元素，但你实际上并没有链接到任何东西，最好不要把它放在一个锚标签中。相反，你可以这样做：

<body>
    <nav>
        <span id="menu-icon"></span>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>

然后在你的css中你可以通过改变光标使跨度表现得像一个链接：

cursor: pointer;

这样您的用户仍然会知道这是一个互动元素。

CSS：悬停行为

2 个答案: