Предотвращение прокрутки при использовании хэша URI для идентификации вкладки

Я использую JQuery UI для создания вкладок в своем приложении. Мне нужно, чтобы вкладки были ссылочными (прямая ссылка, которая открывает страницу и выбирает нужную вкладку). Для этого используется хэш-тег/фрагментированный идентификатор. Но у меня возникла проблема, когда содержимое над вкладками и внутри вкладок очень длинное.

При нажатии на вкладки страница прокручивается вниз до начала вкладки. Это не то, чего я хочу.

Я использую Jquery 1.7.1 и Jquery UI 1.8.16.

Код javascript/Jquery - это стандартный Jquery UI tabs с добавлением события "tabsshow". Это предлагается в Changing location.hash with jquery ui tabs (вопрос на Stackoverflow) и JQuery UI Tabs: Updating URL with hash while clicking the tab (блог - Tech Diary by Robin)

$(document).ready(function() {
    $("#tabs").tabs();

    /**
     * Add hash to URL of the current page
     * 
     * http://chwang.blogspot.com/2010/02/jquery-ui-tabs-updating-url-with-hash.html
     * https://stackoverflow.com/questions/570276/changing-location-hash-with-jquery-ui-tabs
     */
    $("#tabs").bind('tabsshow',function(event, ui) {
        window.location.hash = ui.tab.hash;
    });
});

Для проверки поведения можно использовать следующий HTML



Some other content
Hello. This is tab 1
Hello. This is tab 100.

Heading

Hello. This is tab 1000.

При открытии страницы со следующим URL должна быть открыта вкладка 1, а не прокрутка вниз до начала вкладки. То же самое относится и к щелчку на одной из вкладок.

file.html#tab_1

11
задан Community 23 May 2017 в 11:54
поделиться