Question

我有一个包含a-href-tag的标签：

<input id="sn_menu01_close" class="sn_menu_close" name="sn_menu" type="radio">

<p><label for="sn_menu01_close" class="close">angebot<a href="#angebot">Angebot und Preise</a></label></p>

单击链接时，相应的radiobutton不会触发。单击链接外部的文本时，它可以正常工作。我怎样才能使链接工作呢？两者都必须工作，触发单选按钮并跳到链接目标（锚点）。我正在寻找一个纯CSS解决方案，使用javascript或jQuery它没问题。

Answer 1

尝试使用jQuery函数触发它：

＆＃13;

$('input[type="radio"] ~ p label a').click(function(event) {
  event.preventDefault();
  var radio = $(this).parent().attr('for');
  $('#' + radio).prop("checked", true);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="sn_menu01_close" class="sn_menu_close" name="sn_menu" type="radio">

<p>
  <label for="sn_menu01_close" class="close">angebot<a href="#angebot">Angebot und Preise</a></label>
</p>

＆＃13;

为纯CSS编辑： 尝试使用pointer-events: none禁用该链接：

＆＃13;

input[type="radio"] ~ p label a { 
    pointer-events: none
}

＆＃13;

<input id="sn_menu01_close" class="sn_menu_close" name="sn_menu" type="radio">

<p>
  <label for="sn_menu01_close" class="close">angebot<a href="#angebot">Angebot und Preise</a></label>
</p>

＆＃13;

包含a-href-tag的标签不会触发它的输入

1 个答案: