Я использую пользовательский интерфейс 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