我正在使用JQuery UI在我的应用程序中制作标签.我需要选项卡是可链接的(直接链接打开页面并选择正确的选项卡).这是通过使用散列标记/ 分段标识符来完成的.但是当选项卡上方和选项卡内部的内容很长时,我遇到了问题.
单击选项卡时,页面向下滚动到选项卡的开头.这不是我想要的.
我正在使用Jquery 1.7.1和Jquery UI 1.8.16.
javascript/Jquery代码是标准的Jquery UI选项卡,添加了事件"tabsshow".这在使用jquery ui标签更改location.hash(Stackoverflow问题)和JQuery UI标签时建议:点击标签时更新带有哈希的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
* https://stackoverflow.com/questions/570276/changing-location-hash-with-jquery-ui-tabs
*/
$("#tabs").bind('tabsshow',function(event, ui) {
window.location.hash = ui.tab.hash;
});
});
Run Code Online (Sandbox Code Playgroud)
以下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> …Run Code Online (Sandbox Code Playgroud)