小编典典

在里面使用href链接标签

all

我有以下 HTML 代码:

<select name="forma">
    <option value="Home">Home</option>
    <option value="Contact">Contact</option>
    <option value="Sitemap">Sitemap</option>
</select>

如何将 HomeContactSitemap 值作为链接?我使用了以下代码,正如我所料,它不起作用:

<select name="forma">
    <option value="Home"><a href="home.php">Home</a></option>
    <option value="Contact"><a href="contact.php">Contact</a></option>
    <option value="Sitemap"><a href="sitemap.php">Sitemap</a></option>
</select>

阅读 69

收藏
2022-08-17

共1个答案

小编典典

2022 年更新:这个答案很好,但实际上在 2022 年我们不应该再这样做了!

更新(2020 年 5 月):
有人在评论中问我为什么不提倡这种解决方案。我想这是一个语义问题。我宁愿我的用户导航使用<a>并保持<select>进行表单选择,因为 HTML
元素具有语义会议,它们有一个目的,anchors带你去地方,<select>从列表中挑选东西。

考虑一下,如果您使用非传统浏览器(非图形浏览器或屏幕阅读器或以编程方式访问该页面,或禁用
JavaScript)查看页面,那么您拥有的“意义”或“意图”是<select>什么用于导航?它说的是“请选择一个页面名称”,而不是其他很多,当然与导航无关。对此的简单回应是well i know that my users will be using IE or whatever so shrug,但这有点忽略了语义重要性。

尽管由合适的布局元素(和一些 js)组成的时髦下拉 UI
元素包含一些常规锚点,即使布局元素丢失,它仍然保留其意图,“这些是一堆链接,选择一个,我们将在那里导航” .

这是一篇关于滥用和滥用<select>.

原始答案

<select name="forma" onchange="location = this.value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>

更新(2015 年 11 月):
在这个时代,如果你想要一个下拉菜单,有很多可以说是更好的方法来实现一个。此答案是对直接问题的直接答案,但我不提倡将这种方法用于面向公众的网站。

2022-08-17