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

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>

单击链接时，不会触发相应的单选按钮。单击链接外的文本时，它会起作用。我怎样才能让它也适用于链接？两者都必须工作，触发单选按钮并跳到链接目的地( anchor )。我正在寻找纯 CSS 解决方案，使用 javascript 或 jQuery 没问题。

Answer 1

尝试用 jQuery 函数触发它:

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

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

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

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

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