Question

我要在链接“至Vorträge”，“至Reisen”，“至Exkursionen”链接上选中“Vorträge”，“ Reisen”，“ Exkursionen”复选框。但是它们仅在第二次单击链接后才被激活。我如何在首次点击时选中该复选框？

$(".nav-link").click(function(e) {
    var target = window.location.hash;
    var $targeta = $(target);
    $('html, body').stop().animate({
            'scrollTop': $targeta.offset().top - 100
        }, // set offset value here i.e. 100
        900,
        'swing',
        function() {
            window.location.hash = target - 40;

        });
    $targeta.prev().prop('checked', true);

});

#content__vortraege, #content__reisen,  #content__exkursionen  {
    display: none;
}

#tab1:checked ~  #content__vortraege, #tab2:checked ~  #content__reisen,  #tab3:checked ~ #content__exkursionen {
    display: block;
}

label{
    display:block;    
    margin-bottom: 40px;
}

input{
    display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul>
  <li><a class="nav-link" href="test_anchor_2.html#vortraege">to vorträge</a></li>
  <li><a class="nav-link" href="test_anchor_2.html#reisen">to reisen</a></li>
  <li><a class="nav-link" href="test_anchor_2.html#exkursionen">to exkursionen</a></li>
</ul>
<input id="tab1" type="radio" name="tabs" checked>
<label id="vortraege" for="tab1">Vorträge</label>
<input id="tab2" type="radio" name="tabs">
<label id="reisen" for="tab2">Reisen</label>
<input id="tab3" type="radio" name="tabs">
<label id="exkursionen" for="tab3">Exkursionen</label>
<div id="content__vortraege">
  <p>Vorträge Vorträge Vorträge Vorträge Vorträge Vorträge Vorträge Vorträge Vorträge </p>
  <p>some text to test anchor links, some text to test anchor links, some text to test anchor links, some text to test anchor links</p>
  <p>some text to test anchor links, some text to test anchor links, some text to test anchor links, some text to test anchor links</p>
  <p>some text to test anchor links, some text to test anchor links, some text to test anchor links, some text to test anchor links</p>
  <p>some text to test anchor links, some text to test anchor links, some text to test anchor links, some text to test anchor links</p>
  <p>some text to test anchor links, some text to test anchor links, some text to test anchor links, some text to test anchor links</p>
</div>
<div id="content__reisen">
  <p>Reisen Reisen Reisen Reisen Reisen Reisen Reisen Reisen Reisen Reisen Reisen Reisen Reisen Reisen</p>
  <p>some text to test anchor links, some text to test anchor links, some text to test anchor links, some text to test anchor links</p>
  <p>some text to test anchor links, some text to test anchor links, some text to test anchor links, some text to test anchor links</p>
  <p>some text to test anchor links, some text to test anchor links, some text to test anchor links, some text to test anchor links</p>
  <p id="test">anchor_target</p>
  <p>some text to test anchor links, some text to test anchor links, some text to test anchor links, some text to test anchor links</p>
</div>
<div id="content__exkursionen">
  <p>Exkursionen Exkursionen Exkursionen Exkursionen Exkursionen Exkursionen Exkursionen Exkursionen Exkursionen </p>
  <p>some text to test anchor links, some text to test anchor links, some text to test anchor links, some text to test anchor links</p>
  <p>some text to test anchor links, some text to test anchor links, some text to test anchor links, some text to test anchor links</p>
  <p>some text to test anchor links, some text to test anchor links, some text to test anchor links, some text to test anchor links</p>
  <p>some text to test anchor links, some text to test anchor links, some text to test anchor links, some text to test anchor links</p>
  <p>some text to test anchor links, some text to test anchor links, some text to test anchor links, some text to test anchor links</p>
</div>

Answer 1

之所以发生这种情况，是因为您正在从window.location中删除哈希，该哈希仅在单击后更新。您应该像这样更新代码：

$(".nav-link").click(function(event) {
     event.preventDefault()
     var target = this.hash;
     // rest of the code
});

Answer 2

此外，您的哈希值是“ vortraege”，“ reisen”，“ exkursionen”。

然后在您的JavaScript中，尝试从这些字符串中减去40：

window.location.hash = target - 40;

这会导致您的哈希值设置为NaN（而不是数字），因为"vortraege" - 40是NaN。

如何在首次点击时选中复选框

2 个答案: