使用 URI 哈希识别选项卡时防止滚动
[英] Preventing scroll when using URI hash to identify tab
本文介绍了使用 URI 哈希识别选项卡时防止滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 JQuery UI 在我的应用程序中创建选项卡.我需要标签是可链接的(打开页面并选择正确标签的直接链接).这是通过使用哈希标签/碎片标识符来完成的.但是当标签上方和标签内的内容很长时间时，我有一个问题.
单击选项卡时，页面会向下滚动到选项卡的开头.这不是我想要的.
我使用的是 Jquery 1.7.1 和 Jquery UI 1.8.16.
javascript/Jquery 代码是标准的 Jquery UI 选项卡，添加了事件tabsshow".这在 Changing location.hash with jquery ui tabs (Stackoverflow问题)和 JQuery UI 标签:更新单击选项卡时带有哈希的 URL(博客 - Robin 的技术日记)
$(document).ready(function() {$("#tabs").tabs();/*** 添加哈希到当前页面的 URL** http://chwang.blogspot.com/2010/02/jquery-ui-tabs-updating-url-with-hash.html* https://stackoverflow.com/questions/570276/changed-location-hash-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 src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script><div style="height: 400px;">其他一些内容</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><div id="tab_1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"><table style="height: 1000px"><tr><td>你好.这是标签 1</td></tr></table>
<div id="tab_100" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"><table style="height: 1000px"><tr><td>你好.这是选项卡 100.</td></tr></table>
<div id="tab_1000" class="ui-tabs-panel ui-widget-content ui-corner-bottom"><h2>标题</h2><table style="height: 1000px"><tr><td>你好.这是选项卡 1000.</td></tr></table>
打开带有以下 URL 的页面时，应该打开选项卡 1，而不是向下滚动到选项卡开始的位置.单击其中一个选项卡也是如此.
file.html#tab_1
解决方案
这可能不是最好的方法，但是如果您在创建选项卡后重命名所有 ID，那么添加具有原始 ID 的散列将不会't 滚动页面.我使用这种方法是因为即使禁用了 javascript，散列也会将用户带到正确的 ID.这是以下代码的演示:
$("#tabs").tabs({创建:函数(事件，用户界面){//获取标签插件数据var tabs = $('#tabs').data('tabs'),//tabs.anchors 包含所有的标签锚链接 = tabs.anchors;//tabs.panels 包含每个选项卡tabs.panels.each(function(i){//只为每个 ID/hash 添加一个mod_"前缀this.id = 'mod_' + this.id;链接[i].hash = '#' + this.id;});}});/*** 添加哈希到当前页面的 URL** http://chwang.blogspot.com/2010/02/jquery-ui-tabs-updating-url-with-hash.html* http://stackoverflow.com/questions/570276/changed-location-hash-with-jquery-ui-tabs*/$("#tabs").bind('tabsshow', function(event, ui) {//从 ID 中删除前缀，所以我们在哈希中显示原始 IDwindow.location.hash = ui.tab.hash.replace('mod_', '');});
I'm using JQuery UI to make tabs in my application. I needed the tabs to be linkable (direct link that opens the page and selects the correct tab). This is done by using a hash tag/fragmented identifier. But I have a issue when the content above the tabs and inside the tabs is very long.
When clicking the tabs, the page scrolls down to the start of the tab. This is not what I want.
I'm using Jquery 1.7.1 and Jquery UI 1.8.16.
The javascript/Jquery code is a standard Jquery UI tabs with the addition to the event "tabsshow". This is suggested in Changing location.hash with jquery ui tabs (Stackoverflow question) and JQuery UI Tabs: Updating URL with hash while clicking the tab (blog - 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;
});
});
The following HTML can be used to test the behavior
<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>
When opening the page with the following URL, one should have tab 1 opened and not scroll down to where the tab starts. The same goes for clicking on one of the tabs.
file.html#tab_1
解决方案
This may not be the best method, but if you rename all of the ID's after the tabs have been created, then adding a hash with the original ID won't scroll the page. I used this method because even with javascript disabled, the hash will take the user to the correct ID. Here is a demo of the code below:
$("#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_', '');
});
这篇关于使用 URI 哈希识别选项卡时防止滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
