Question

我有一个jquery手风琴标签和一些锚链接贯穿整个内容。我想知道是否单击ancor链接，然后打开选项卡，页面向下滚动到该链接。打开选项卡时跳转链接有效，但关闭选项卡时跳转链接无效。你能告诉我如何使它工作吗？谢谢

HTML

<ol>
    <li><a href="#jump-here-1">Jump Here 1</a></li>
    <li><a href="#jump-here-2">Jump Here 2</a></li>
</ol>

<div id="accordion">
    <h3 class="testing">Tab 1</h3>
    <div>
        <h4><a id="jump-here-1">Jump Here 1</a></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce magna augue, pretium quis commodo vel,
            tristique quis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
            Curae; Phasellus sollicitudin neque id odio dignissim ac dignissim libero iaculis. Sed lectus odio,
            vehicula et placerat ut, posuere sit amet dolor.</p>
    </div>
    <h3 class="testing">Tab 2</h3>
    <div>
        <h4><a id="jump-here-2">Jump Here 2</a></h4>
        <p>In hac habitasse platea dictumst. Mauris et nisl orci, eget faucibus neque. Suspendisse bibendum nisi ut
            ligula imperdiet non dignissim lectus congue. Proin id nisi arcu. Class aptent taciti sociosqu ad litora
            torquent per conubia nostra, per inceptos himenaeos.</p>
    </div>
</div>

JS

$(function() {
    $( "#accordion" ).accordion({
        heightStyle: "content",
        collapsible: true,
        active: false,
        activate: function( event, ui ) {
            if(!$.isEmptyObject(ui.newHeader.offset())) {
                $('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 'slow');
            }
        }
    });
});

我在这里有演示https://jsfiddle.net/q6mg40Lj/

Answer 1

您可以在document.ready中添加一个点击事件，它将起作用

$(document).ready(function() {
  $('#openTab1').click(function() {
    $('.testing').eq(0).click();
    
    setTimeout(function(){ $('html,body').animate({ scrollTop: $("#openTab1").offset().top}, 'slow'); }, 200);
    
  });
  $('#openTab2').click(function() {
    $('.testing').eq(1).click();
    
    setTimeout(function(){ $('html,body').animate({ scrollTop: $("#openTab2").offset().top}, 'slow'); }, 200);
    
  });
});

$(function() {
  $("#accordion").accordion({
    heightStyle: "content",
    collapsible: true,
    active: false,
    activate: function(event, ui) {
      if (!$.isEmptyObject(ui.newHeader.offset())) {
        $('html:not(:animated), body:not(:animated)').animate({
          scrollTop: ui.newHeader.offset().top
        }, 'slow');
      }
    }
  });
});

body {
  font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
  font-size: 80%;
}

p.test {
  font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
  height: 300px;
  font-size: 100%;
}

#accordion {
  width: 500px;
}

<link href="https://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<ol>
  <li><a id="openTab1">Jump Here 1</a></li>
  <li><a id="openTab2">Jump Here 2</a></li>
</ol>

<p>More text here... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce magna augue, pretium quis commodo vel, tristique quis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>

<div id="accordion">
  <h3 class="testing">Tab 1</h3>
  <div>
    <h4><a id="jump-here-1">Jump Here 1</a></h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce magna augue, pretium quis commodo vel, tristique quis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus sollicitudin neque id odio
      dignissim ac dignissim libero iaculis. Sed lectus odio, vehicula et placerat ut, posuere sit amet dolor.</p>

  </div>
  <h3 class="testing">Tab 2</h3>
  <div>
    <h4><a id="jump-here-2">Jump Here 2</a></h4>
    <p>In hac habitasse platea dictumst. Mauris et nisl orci, eget faucibus neque. Suspendisse bibendum nisi ut ligula imperdiet non dignissim lectus congue. Proin id nisi arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
      himenaeos.</p>
  </div>

</div>

<p class="test">More text here... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce magna augue, pretium quis commodo vel, tristique quis odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>

Answer 2

您可以在单击时使用手风琴api打开相关手风琴：

$("#accordion").accordion("option", "active", index);

您将需要提前知道按钮位于哪个“手风琴”“选项卡”中，这与您现有的滚动代码非常冲突。

更新了代码的相关部分：

<li><a href="#jump-here-1" data-accordion='0'>Jump Here 1</a></li>
<li><a href="#jump-here-2" data-accordion='1'>Jump Here 2</a></li>

和

$("a[data-accordion]").click(function() {
    var id = $(this).data("accordion");
    $("#accordion").accordion("option", "active", id);
});

更新的小提琴：https://jsfiddle.net/q6mg40Lj/1/

您可以使用类似/替代方法，通过解析href，找到目标，找到最近的（父）选项卡，然后找到该选项卡的兄弟索引来确定目标锚驻留在哪个手风琴中。

更新：如果目标位于选项卡的底部，则由于尚不可见，因此无法被浏览器跳转到目标。

jQuery手风琴api为此提供了另一个解决方案：

http://api.jqueryui.com/accordion/#event-activate

在您的代码中，可以实现为：

var target = $(this).attr("href");
$("#accordion").one("accordionactivate", function( event, ui ) {
  $(document).scrollTop($(target).offset().top);
});

更新的小提琴：https://jsfiddle.net/q6mg40Lj/4/

您可以提供“平滑滚动”而不是跳转，但这只是设置滚动位置时的语义。

Answer 3

您也可以使用demo

$('li a').on('click', function() {
  var index = $(this).parent().index();
  $('#accordion h3').eq(index).click();
})

标签关闭时，锚点跳转链接不起作用

3 个答案: