我正在使用JQuery UI在我的应用程序中制作标签。我需要选项卡是可链接的（直接链接打开页面并选择正确的选项卡）。这是通过使用哈希标记/ fragmented identifier来完成的。但是当标签上方和标签内的内容很长时，我遇到了一个问题。
单击选项卡时，页面向下滚动到选项卡的开头。这不是我想要的。
我正在使用Jquery 1.7.1和Jquery UI 1.8.16。
javascript / Jquery代码是标准的Jquery UI选项卡，添加了事件“tabsshow”。这在Changing location.hash with jquery ui tabs（Stackoverflow问题）和JQuery UI Tabs: Updating URL with hash while clicking the tab（博客 - 罗宾的技术日记）中提出
$(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可用于测试行为
<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
答案 0 :(得分：5)
这可能不是最好的方法，但是如果在创建选项卡后重命名所有ID，则添加带有原始ID的哈希将不会滚动页面。我使用此方法是因为即使禁用了javascript，哈希也会将用户带到正确的ID。以下代码为a demo：
$("#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_', '');
});
答案 1 :(得分：3)
正如其他人所提到的，来自@Mottie的代码可能曾经使用过旧版本的jQuery UI，但这肯定已经停止了。 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_", "");
},
});
答案 2 :(得分：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
}
});
});
答案 3 :(得分：1)
您必须更改窗口哈希而不滚动页面。以下是关于SO的问题 - Modifying document.location.hash without page scrolling。
所需的更改是：
$("#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。所以我不得不使用这个。
答案 4 :(得分：0)
我刚刚将以下内容添加到我的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 does not work in Chrome, nor do suggested workarounds
答案 5 :(得分：0)
这个简单的方法对我有用：
/* Prevent scroll to tab on click */
$(document).ready(function(){
$("a.ui-tabs-anchor").click(function(e){
e.preventDefault();
return false;
});
});
答案 6 :(得分：-1)
我试过@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 });
});
答案 7 :(得分：-1)
这个页面上有很多答案，在我看来，大多数答案都过于复杂。
基本上，大卫托马斯的解决方案是最简单和最有效的。基本上，您要做的就是阻止选项卡链接（<a>标记）上的默认链接行为。
相同的答案适用于引导选项卡，您必须在其中指定单击处理程序
$('.nav-tabs a').click(function(e){
e.preventDefault();
$(this).tab('show');
});