相关疑难解决方法(0)

JQuery UI选项卡导致屏幕"跳转"

我正在使用最新版本的jQuery UI选项卡.我的标签位于页面底部.

每次单击选项卡时,屏幕都会跳到顶部.

我怎样才能防止这种情况发生?

请看这个例子:

http://5bosses.com/examples/tabs/sample_tabs.html

javascript jquery tabs jquery-ui jquery-ui-tabs

48
推荐指数
4
解决办法
4万
查看次数

使用URI哈希识别选项卡时阻止滚动

我正在使用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)

jquery tabs jquery-ui jquery-ui-tabs fragment-identifier

11
推荐指数
3
解决办法
8287
查看次数