制作一个只有 html 和 css 的“href”列表菜单答案

【问题标题】：Make a "href" list menu with only html and css制作一个只有 html 和 css 的“href”列表菜单
【发布时间】：2014-07-23 06:56:14
【问题描述】：

这是我的代码：

    <li class="bouton_produit">
        <select>
            <option> Produit </option>
            <option> <a href="ajouter_produit.php">Ajouter un Produit Semi Fini</a> </option>
            <option> <a href="ajouter_produit_final.php">Ajouter un Produit Fini</a> </option>
        </select>
    </li>

我想要做的是当我点击“Ajouter un Produit Semi Fini”时，它会在页面“ajouter_produit.php”上发送给我，当我点击“Ajouter un Produit Fini”时它会发送给我“ajouter_produit_final.php”页面。

我的问题，我有列表，但是当我点击时，它只“选择”我的链接，当它在另一个页面上发送给我时，它不像真正的 href 链接。

我怎么能只使用 HTML 和 CSS 来做到这一点？

【问题讨论】：

标签： html list select hyperlink href

【解决方案1】：

<a> 标记在select 选项中无效。您应该在 JavaScript 中使用 onchange 事件。

其实这个问题是Can I use HTML tags in the options for select elements?的重复问题

还有以下问题：SELECT Dropdown that redirects without Javascript 对是否可以在没有 javascript 的情况下完成这一问题的回答是否定的。

【讨论】：

仅使用 HTML 和 CSS 是否可行？我不想使用 JavaScript（我从未使用过）
这是另一个问题——我建议您将其作为一个单独的问题提出。
技术上是的。您可以创建一个 CSS 下拉菜单，在其中放置这些链接，而不是使用 select。看到这个：line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

【解决方案2】：

由于a 在选项中不起作用，因此您可以将option 中的href 链接值作为值，并将其与jquery 一起使用并将其设置为window.location.href。

如果您以前从未使用过 js，那么现在是时候学习 js 了。知道它从来都不是坏事；）

<li class="bouton_produit">
 <select id="selected">
    <option>Produit</option>
    <option value="ajouter_produit.php">Ajouter un Produit Semi Fini</option>
    <option value="ajouter_produit_final.php">Ajouter un Produit Fini</option>
 </select>
</li>

js：

$(function(){
 $('#selected').on('change',function(){
  var href_link = $(this).val();
  window.location.href = href_link;
 });
});

演示：http://jsfiddle.net/3xY7L/

【讨论】：

【解决方案3】：

技术上是的。您可以创建一个 CSS 下拉菜单，在其中放置这些链接，而不是使用 select。看到这个：line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

【讨论】：

大声笑你是不是抄袭了 Ahmet Özışık Oo 的答案