Question

我有一个包含很多表的静态HTML页面。我想使用html标记<select>创建一个简单的下拉菜单，该菜单跳转到页面下方的特定表格。

什么命令设置用户选择以跳转页面，以及为该选择提供目标所需的锚代码。

Answer 1

我相信您只需要使用JavaScript来实现这一点，当您单击/更改选择框上的值时，它会转到该选择选项的值中指定的链接。

<select name="dropdpown" size="1" id="select-anchor">
    <option value="#link">foo</option>
    <option value="#link">bar</option>
</select>

使用jQuery库实现JavaScript功能简化了事物（以及Web项目的其他JS相关功能）

$(document).ready(function () {
    $('#select-anchor').change( function () {
        var targetPosition = $($(this).val()).offset().top;
        $('html,body').animate({ scrollTop: targetPosition}, 'slow');
    });
});

Here's a jsFiddle它的实际效果。

Answer 2

没有JavaScript，你不能这样做。 你也不应该 。

作为用户，我希望从下拉列表中选择一个值。在其他人之间选择一项。不充当导航。

有人可以说，如果为移动浏览器做了就行了，但这仍然是不好的用户体验。

在html </select>的<select>下拉列表中使用页面锚点

2 个答案: