4

我在使用 jquery ui 选项卡时遇到了一个奇怪的问题。

这是代码：

  <div class="ym-gbox">
    <script>
    $(function() {
        $( "#tabs" ).tabs();
    });
    </script>
            <h1>Versions Übersicht</h1>
    <br />
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">System Kern</a></li>
            <li><a href="#tabs-2">Anwendungen</a></li>
            <li><a href="#tabs-3">Bibliotheken</a></li>
        </ul>
        <div id="tabs-1">
            <table width="100%" border="0" cellpadding="0" cellspacing="0" class="bordertable">
<tr><th>Name</th><td>System Kern</td></tr>
<tr><th>Version</th><td>1.0.0 </td></tr>
<tr><th>Beschreibung</th><td></td></tr><tr><td colspan="2">System Kern</td></tr>
<tr><th>Webseite</th><td>http://www.dsws.biz</td></tr>
<tr><th>Lizenz</th><td>Dark Star Web Services Source Lizenz</td></tr>
<tr><th>Autor</th><td>
</td></tr>
</table>
        </div>
        <div id="tabs-2">
            b
        </div>
        <div id="tabs-3">
            c
        </div>
    </div>
  </div>

页面加载后，整个页面就会加载到选项卡选项卡中。我真的不知道为什么会这样。

4

6 回答 6

4

对我来说，这个确切的问题与基本标签有关，无法通过 Chris idea 所指的点击事件来解决。如果您的 url 被重写为具有完整的绝对 url，也可能会发生这种情况，例如通过缓存工具或 .htaccess

因此，如果您的标签被重写为<a href="http://example.com/page/#tab1">tabname</a>

然后一个解决方案是在初始化选项卡之前删除完整的 url。以下内容（为了简单起见进行了扩展）删除了 # 之前的所有内容

jQuery("#mytabs ul li a").each(function () {
    var current = jQuery(this).attr("href");
    var n = current.indexOf("#");
    jQuery(this).attr("href", current.substr(n));
});

jQuery("#mytabs").tabs( .. )
于 2014-05-13T22:13:44.160 回答
3

正如用户 user2235863 所说，您需要从代码中删除基本标签才能使其工作。我不知道它为什么会起作用，但确实如此。

但是这种修改可能会产生副作用，例如加载相对 url 图像。解决方案是在页面加载后和标签初始化之前使用 javascript 删除基本标签：

jQuery(function($){
    $('base').remove();
    $('#tabs_div').tabs();
});
于 2013-07-08T14:58:10.023 回答
1

我遇到了与标签一起加载完整页面的同样奇怪的问题。这似乎是一个无限循环，其中标签内容一遍又一遍地加载完整页面。

使用版本会发生这种情况。jQueryUI 1.9.2 和版本。1.8.3 的 jQuery 但不是版本。jQueryUI 1.8.17 和版本。1.8.3 的 jQuery。这就是 jsfiddle 不显示它的原因。

Chris 我也在使用 mod_rewrite 模块，但我真的需要它，所以既不能跳过它也不能使用基于 Ajax 的版本。

于 2012-12-23T18:46:53.350 回答
1

解决方案是从您的页面中删除 HTML < base href="http://site_name" />。（基础标签）

我遇到了同样的问题，并且出于某种原因修复了它。我正在使用 ui-1.10.2

于 2013-04-03T21:29:45.880 回答
1

如果删除 BASE 标记不适用于您的站点环境（因为使用 URL 重写或其他类似技术），则解决方案是生成一个包含当前页面完整 URL 的变量，并将其写入选项卡 HREF 之前的开头#tab-number 匹配您的选项卡 ID。这样，jQuery UI 将识别您的选项卡内容是当前页面的本地内容，而不是尝试使用存储在 BASE 标记中的 URL 通过 AJAX 加载它。一个 PHP 示例是：

$url = "http" . ((!empty($_SERVER['HTTPS']) && strtolower($_SERVER['HTTPS']) != 'off') ? "s://" : "://") . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

在此 Stack 问题的答案中，可能有更完整或更准确的方法来获取正确的当前 URL，尤其是在您使用负载均衡器的情况下：

http://stackoverflow.com/questions/6768793/php-get-the-full-url
于 2014-01-02T02:32:25.607 回答
0

我找到了问题的核心。系统不会阻止默认处理程序被触发。对于链接，它是对页面的重定向。如果您在单击处理程序中添加 preventDefault 并根据您想要执行的操作（例如将选项卡更改为选定选项卡）处理单击事件，您可以绕过它。

例子：

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
});

此示例取自此页面： http: //getbootstrap.com/javascript/#tabs

我今天有一个非常相似的问题。添加此代码后，它可以正常工作。

于 2014-01-08T13:25:06.517 回答