Создайте меню списка "href" только с html и css

Вопрос:

Вот мой код:

    <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?

Лучший ответ:

Тег <a> не влияет на параметры select. Вы должны использовать событие onchange в JavaScript.

На самом деле вопрос заключается в дублировании. Могу ли я использовать теги HTML в параметрах для отдельных элементов?

Также был задан следующий вопрос: SELECT Dropdown, который перенаправляет без Javascript, имеет отрицательный ответ на вопрос, можно ли это сделать без javascript.

Ответ №1

так a функция donot не работает внутри, как предполагается, вы можете взять значение href link внутри option как значение и взять его с 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>

ЯШ:

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

ДЕМО: http://jsfiddle.net/3xY7L/

Ответ №2

Технически да. Вы можете создать раскрывающееся меню CSS, где вы размещаете эти ссылки, а не выбираете. Смотрите это: line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

Оцените статью
TechArks.Ru
Добавить комментарий