Question

我正在使用jQuery ui tab解决方案，完全按照此处的说明http://jsfiddle.net/fordlover49/XHD5N/

一切正常，除非我有一个包含大量数据的标签，浏览器会自动滚动到窗口底部以显示标签上的内容..

无论选项卡上有多少数据，如何将标签保持在相同的位置？根据标签的高度上下跳动的标签让我发疯 - 我在标签上方的页面上有一些数据，因此标签将位于屏幕的一半（我希望标签保持在屏幕的一半）屏幕无论选项卡上有什么内容

这里是您可以在浏览器中复制和粘贴测试的完整源代码，请帮助!! ;）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by fordlover49</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>


  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>


   <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css">




<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    $(function() {
        $( "#tabs" ).tabs({
            panelTemplate: "<iframe style='width:100%; border=0; height:500px'></iframe>",
            idPrefix: "ui-tabs-",
            select: function(event, ui) {
                if (!$("#ui-tabs-" + ui.index).prop("src")) {
                  $("#ui-tabs-" + ui.index).attr("src", $.data(ui.tab, 'load.tabs'));  
                } 
            }
        });
    });
});//]]>  

</script>


</head>
<body>
<div id="test" style="height:500px;">dummy</div>
<div id="tabs">
    <ul style="padding: 0; margin: 0;">
        <li><a id="recent-tab" href="#ui-tabs-0">Amazon</a></li>
        <li><a id="popular-tab" href="http://jqueryui.com/demos/tabs">jQuery</a></li>
        <li><a id="random-tab" href="http://www.jsfiddle.net">jsfiddle</a></li>
        <li><a id="question-tab" href="http://www.bing.com">Bing</a></li>
    </ul>

    <div id="ui-tabs-0"> Select a tab, and watch it load!</div>
</div>
</body>
</html>

jQuery UI Tab屏幕跳转自动滚动到窗口底部让我疯狂

0 个答案: