Ссылка для перехода привязки не работает, когда вкладки закрыты
У меня есть вкладки аккордеона 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/
Да именно этого я и хочу
Вы можете увидеть мой ответ и дайте мне знать, сработало это или нет
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете добавить событие щелчка в свой 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>Спасибо, Ибрагим и Freedomn-m, код работает, чтобы открыть вкладку, но страница не прокручивается до привязки, я попытался поставить привязку внизу.
Вы можете использовать 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, поиска цели, поиска ближайшей (родительской) вкладки, а затем поиска индекса сестры этой вкладки.
Обновлять: если цель находится внизу вкладки, браузер не может перейти к ней, поскольку она еще не видна.
API-интерфейс jquery accordion предоставляет другое решение для этого:
В вашем коде это можно реализовать как:
var target = $(this).attr("href");
$("#accordion").one("accordionactivate", function( event, ui ) {
$(document).scrollTop($(target).offset().top);
});
Обновленная рабочий пример: https://jsfiddle.net/q6mg40Lj/4/
Вы могли бы обеспечить «плавную прокрутку», а не скачок, но это всего лишь семантика установки положения прокрутки.
Спасибо Freedomn-m, он открывает вкладку, но когда я помещаю якорь внизу, страница не прокручивается до нее.
Вероятно, потому что ваш другой код прокрутки заставляет его вернуться наверх
Нет, потому что встроенный код аккордеона заставляет его подняться наверх: jsfiddle.net/q6mg40Lj/2
Хорошо, скорее всего, это потому, что цель привязки все еще не видна, поэтому не к чему прыгать - дело не в том, что она заставляет ее подняться наверх, а в том, что она все еще расширяет вкладку. Можно было отключить анимацию и она работает, но это плохой UX jsfiddle.net/q6mg40Lj/3 см. stackoverflow.com/questions/18708549/…
Вы могли бы добавить setTimeout, но это кажется неаккуратным решением.
Спасибо @ freedomn-m, это именно то, что я хочу, большое вам спасибо. Вы правы, анимация прокрутки заставляет его вернуться наверх, но ничего страшного, мне не нужна анимация.
вы также можете использовать это, демонстрация
$('li a').on('click', function() {
var index = $(this).parent().index();
$('#accordion h3').eq(index).click();
})
Спасибо Ewwink, код работает, чтобы открыть вкладку, но страница не прокручивается до привязки, когда привязка находится внизу.
он работает, если я помещаю ссылку внизу, см. jsfiddle.net/qeg3ms09, вы можете показать свою скрипку
@ewwink Я думаю, что OP означает целевой якорь, а не ссылку с возможностью щелчка jsfiddle.net/qeg3ms09
Итак, что вы хотите, это чтобы если я нажму на «jump1», он прокрутится до нижней части «Tab 1», когда последняя будет закрыта?