Question

我想将页内链接的a元素放置在label元素中，以使复选框随页面中的每次移动而切换。

所以首先我写了这段代码：

div {
  width: 100px;
  height: 50px;
  background: #121;
}

<input type="checkbox" id="correct">

<label for="correct">text</label>

<div></div>

<label for="correct">teeeext</label>

这是通过单击每个标签并切换复选框来完成的。

但是，当我创建带有标签元素内链接的代码时，该复选框停止工作。

div {
  width: 100px;
  height: 50px;
  background: #121;
}

<input type="checkbox" id="correct">

<label for="correct"><a href="#link1">not work!</a></label>

<div></div>

<label for="correct">work!</label>

<label for="correct"><a href="#link2">not work!</a></label>

搜索的结果是，我发现了一个类似的问题，但是没有写任何有关使用页内链接的解决方案。

javascript - <a> tag inside <label> tag not triggering checkbox - Stack Overflow

在使用label元素内的页内链接时，我需要哪种CSS来切换复选框？

Answer 1

这很棘手，但是您可以使用标签内的锚点中的pointer-events: none;和标签中的cursor: pointer;来实现，以保留指针。

这显然将阻止锚标记的默认操作被执行。如果您需要同时执行这两项操作（请选中复选框并点击链接），则需要使用一些JavaScript。

div {
  width: 100px;
  height: 50px;
  background: #121;
}


label{
    cursor: pointer;
}

label a{
    pointer-events: none;
}

<input type="checkbox" id="correct">

<label for="correct"><a href="#link1">work!</a></label>

<div></div>

<label for="correct">work!</label>

<label for="correct"><a href="#link2">work!</a></label>

Answer 2

a标签仅用于导航，因此在标签内添加定位标签将导致您的页面导航至其他部分或页面。它不会检查您的输入

我想导航到内部部分并检查输入，所以需要使用JS。

$(function(){
var location
  $('a').click(function() {
    location = $(this).attr('href')
    $('[data-target="' + location + '"]').prop('checked',true)
  })
  $('input[type="checkbox"]').click(function () {
    location = $(this).attr('data-target')
    if($(this).prop("checked")) {
      $('html, body').animate({
        scrollTop: $(location).offset().top
      }, 0);
    }
  })
})

div {
  margin-top: 1000px;
  width: 100px;
  height: 50px;
  background: #121;
}

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<label for="correct">visited
<input type="checkbox" id="correct" data-target="#section1">
<label>

<a href='#section1'>working</a>

<div id='section1'></div>
</body>
</html>

在这里您可以找到有关锚标签https://www.w3schools.com/tags/tag_a.asp

的更多信息

如果标签元素中有锚元素，则复选框不起作用

2 个答案: