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

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

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

Я использую JQuery 1.7.1 и пользовательский интерфейс JQuery 1.8.16.

Код javascript/JQuery - это стандартные вкладки пользовательского интерфейса Jquery с добавлением к событию "tabsshow". Это предлагается в изменении location.hash с вкладками jquery ui (вопрос о стекировании) и вкладки пользовательского интерфейса JQuery: Обновление URL-адреса с помощью хэша при нажатии вкладки (блог - технический дневник Робин)

$(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
     * /info/113241/changing-locationhash-with-jquery-ui-tabs
     */
    $("#tabs").bind('tabsshow',function(event, ui) {
        window.location.hash = ui.tab.hash;
    });
});

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<div style="height: 400px;">Some other content</div>
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top"><a href="#tab_1"><span>Tab 1</span></a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tab_100"><span>Tab 100</span></a></li>
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tab_1000"><span>Tab 1000</span></a></li>
    </ul>

    <div id="tab_1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
        <table style="height: 1000px"><tr><td>Hello. This is tab 1</td></tr></table>
    </div>


    <div id="tab_100" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
        <table style="height: 1000px"><tr><td>Hello. This is tab 100.</td></tr></table>
    </div>


    <div id="tab_1000" class="ui-tabs-panel ui-widget-content ui-corner-bottom"><h2>Heading</h2>
        <table style="height: 1000px"><tr><td>Hello. This is tab 1000.</td></tr></table>
    </div>
</div>

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

file.html#tab_1

Ответ 1

Это может быть не лучший метод, но если вы переименуете все ID после создания вкладок, добавление хеша с исходным идентификатором не будет прокручивать страницу. Я использовал этот метод, потому что даже с отключенным javascript хэш приведет пользователя к правильному идентификатору. Ниже приведено демо нижеуказанного кода:

$("#tabs").tabs({
    create: function(event, ui) {
        // get tab plugin data
        var tabs = $('#tabs').data('tabs'),
            // tabs.anchors contains all of the tab anchors
            links = tabs.anchors;
        // tabs.panels contains each tab
        tabs.panels.each(function(i){
            // just adding a "mod_" prefix to every ID/hash
            this.id = 'mod_' + this.id;
            links[i].hash = '#' + this.id;
        });
    }
});

/**
 * Add hash to URL of the current page
 * 
 * http://chwang.blogspot.com/2010/02/jquery-ui-tabs-updating-url-with-hash.html
 * http://stackoverflow.com/questions/570276/changing-location-hash-with-jquery-ui-tabs
 */
$("#tabs").bind('tabsshow', function(event, ui) {
    // remove the prefix from the ID, so we're showing the original ID in the hash
    window.location.hash = ui.tab.hash.replace('mod_', '');
});

Ответ 2

Как уже упоминалось, код из @Mottie, возможно, когда-то работал над более старыми версиями пользовательского интерфейса jQuery, но это определенно перестало работать. JQuery UI Tabs api немного изменился с тех пор, как это было написано, так что здесь представлена ​​обновленная версия, которая работает, по крайней мере, с jQuery 1.10.2

Демо здесь: http://jsfiddle.net/xsx5u5g2/

var $tabs = $("#tabs");
$tabs.tabs({
  create: function(event, ui) {
    // Adjust hashes to not affect URL when clicked.
    var widget = $tabs.data("uiTabs");
    widget.panels.each(function(i){
      this.id = "uiTab_" + this.id; // Prepend a custom string to tab id.
      widget.anchors[i].hash = "#" + this.id;
      $(widget.tabs[i]).attr("aria-controls", this.id);
    });
  },
  activate: function(event, ui) {
    // Add the original "clean" tab id to the URL hash.
    window.location.hash = ui.newPanel.attr("id").replace("uiTab_", "");
  },
});

Ответ 3

Я использую jQuery 1.11.1. Это хорошо работает для меня.

$("#tabs").tabs(); //initialize tabs
$(function() {
    $("#tabs").tabs({
        activate: function(event, ui) {
            var scrollTop = $(window).scrollTop(); // save current scroll position
            window.location.hash = ui.newPanel.attr('id'); // add hash to url
            $(window).scrollTop(scrollTop); // keep scroll at current position
        }
    });
});

вкладки jQuery UI, обновите URL-адрес при нажатии на другую вкладку

Благодаря Jeff B для указания здесь http://jsfiddle.net/jtbowden/ZsUBz/44/ p >

Ответ 4

Вы должны изменить хэш окна, не прокручивая страницу. Здесь уже задан вопрос о SO - Модификация document.location.hash без прокрутки страницы.

Необходимые изменения:

$("#tabs").bind('tabsshow',function(event, ui) {
    setHashWithoutScroll(ui.tab.hash);
});

Функция setHashWithoutScroll может быть взята из вышеупомянутой ссылки.

function setHashWithoutScroll(hash) {
    hash = hash.replace( /^#/, '' );
    var fx, node = $( '#' + hash );
    if ( node.length ) {
      node.attr( 'id', '' );
      fx = $( '<div></div>' )
              .css({
                  position:'absolute',
                  visibility:'hidden',
                  top: $(document).scrollTop() + 'px'
              })
              .attr( 'id', hash )
              .appendTo( document.body );
    }
    document.location.hash = hash;
    if ( node.length ) {
      fx.remove();
      node.attr( 'id', hash );
    }
}

Принятый ответ вызывает мне ошибку - jQuery UI Tabs: Mismatching fragment identifier. Поэтому я должен был использовать этот.

Ответ 5

Я просто добавил следующее в свой javascript:

    $('#tabs').tabs();
    // Direct links to the tabs, e.g. /my-page#tab-id can cause browsers
    // to scroll down to half-way down the page, which is ugly. We override that here.
    // (This can cause a brief FOUC effect where the page first displays then scrolls up)
    window.scrollTop = '0';
    window.scrollTo(0,0);

В MSIE я получаю краткий FOUC, поскольку страница загружается с прокруткой в ​​обратном направлении, а затем перемещается вверх.

В Firefox это прекрасно работает без видимой FOUC.

В Chrome это вообще не работает - см. scrollTop не работает в Chrome и не предлагает обходные пути

Ответ 6

Этот простой метод работал у меня:

/* Prevent scroll to tab on click */
$(document).ready(function(){
  $("a.ui-tabs-anchor").click(function(e){
      e.preventDefault();
      return false;
  });
});

Ответ 7

Я попробовал решение @mottie, но сейчас не работает (через 2 года).
Он вызывает ошибку: TypeError: tabs is undefined.

Следующее является приемлемым решением для меня:

// preventing scroll
// $("#tabs li a[href^='#tab']").bind('click',function(e){ // less general but better
$("#tabs li a").bind('click',function(e){
    $("html, body").animate({ scrollTop: 0 });
});

Ответ 8

На этой странице много ответов, и, на мой взгляд, большинство из них являются слишком сложными.

В принципе, решение от david-thomas является самым простым и эффективным. По существу, все, что вы хотите сделать, это предотвращать поведение ссылки по умолчанию на ссылку вкладки (тег <a>).

Тот же ответ относится к вкладкам бутстрапа, где вам нужно указать обработчик кликов

   $('.nav-tabs a').click(function(e){
        e.preventDefault();
        $(this).tab('show');
    });