Question

我对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>

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

Answer 1

对我来说，这个确切的问题与基本标签有关，并且无法通过Chris想法引用的点击事件来解决。如果您的网址被重写为具有完整的绝对网址，例如，也可能发生这种情况。通过缓存工具或.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( .. )

Answer 2

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

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

jQuery(function($){
    $('base').remove();
    $('#tabs_div').tabs();
});

Answer 3

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

使用ver发生这种情况。 1.9.2的jQueryUI和ver。 1.8.3的jQuery但不是ver。 1.8.17的jQueryUI和ver。 1.8.3的jQuery。这就是为什么jsfiddle没有表现出来的原因。

Chris我也在使用mod_rewrite模块，但我确实需要它，因此不能跳过它或使用基于Ajax的版本。

Answer 4

解决方案是删除HTML＆lt; base href =“http：// site_name”/＆gt;来自你的网页。（基本标签）

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

Answer 5

如果删除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

Answer 6

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

示例：

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

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

今天我遇到了一个非常类似的问题。添加此代码后，它没有问题。

Answer 7

我也对选项卡有一个奇怪的问题。这个问题与您的问题不同，但我认为仍然值得与您分享，因为我花了几个小时才能解决它。

我的html页面包含一个标签。每当我的JavaScript文件调用tabs（）函数时，它都会在自己内部重新呈现我的页面。就像被递归调用一样。

通过在调用tabs（）之前从页面中删除标签来解决我的问题。

我花了很多时间弄清楚它，因为我没有在互联网上找到关于它的任何东西。

Jquery UI - Tabs反应奇怪

7 个答案: