Jquery UI - 标签行为怪异答案

【问题标题】：Jquery UI - Tabs reacting weiredJquery UI - 标签行为怪异
【发布时间】：2012-12-22 01:11:32
【问题描述】：

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

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

【问题讨论】：

你看到问题here了吗？
它正确显示标签。但之后主页被加载。我对此有点困惑。
找到了问题所在。我正在使用 mod-rewrite 来屏蔽 php 创建的页面和参数。如果我删除href，它会起作用。但是一旦它们出现，它就会再次显示相同的行为。
我将其移至基于 ajax 的版本。它在那里工作

标签： jquery html jquery-ui jquery-ui-tabs

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

我没有找到除 ajax 推送之外的其他解决方案。但我仍在寻找一些东西。

【解决方案4】：

解决方案是从您的页面中删除 HTML 。（基础标签）

我遇到了同样的问题，由于某种原因，这解决了它。我正在使用 ui-1.10.2

【讨论】：

但是这个解决方案的问题是，如果你使用重写，所有的图像都需要被绝对地址而不是相对于一个基本的 url

【解决方案5】：

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

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

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

http://stackoverflow.com/questions/6768793/php-get-the-full-url

【讨论】：

【解决方案6】：

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

示例：

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

这个例子取自这个页面：http://getbootstrap.com/javascript/#tabs

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

【讨论】：