0

我正在尝试使用fancybox 通过ajax 加载动态内容。

它拉得很好，但如果我使用默认功能或通过 ajax 使用，我不会更改选项卡。但我使用fancybox并将类型设置为“iframe”它加载和选项卡正确交替。

我正在考虑不使用 iframe，以便该框可以轻松调整并自动调整到选定的选项卡中

实时站点位于 www.wearsitbest.com ...登录/注册链接。

$(文档).ready(函数() {

      $("#various2").fancybox();

      $("#various3").fancybox();

              });     </script>

链接到花哨的盒子

登录/注册

用于 login.php 的 tabbed.js

onload = function() { var e; 变量 i = 0; while (e = document.getElementById('galleryx').getElementsByTagName ('DIV') [i++]) { if (e.className == 'on' || e.className == 'off') { e.onclick = function () { var getEls = document.getElementsByTagName('DIV'); 对于 (var z=0; z

请帮忙！！！！

4

1 回答 1

0

编辑： 好的，我查看了您的 login.php 文件。请记住，您正在使用 fancybox 插件通过 AJAX 加载内容。这与将其放入 iframe 非常不同。当您通过 AJAX 加载内容时，它是您页面的一部分，而不是您页面中的单独 HTML 文档。它将与您的页面共享相同的脚本，并且您主页上的任何脚本也可以应用于加载的内容，这就是我建议您使用 jQuery 代码的原因。

现在，当我运行代码时，在firebug javascript 控制台中，它可以工作，而当您将其放入 login.php 文件时，它却没有。显然，fancybox 没有通过 ajax 加载脚本。看：在 AJAX 加载页面中使用 fancybox。如果您检查 firebug 或其他工具中的 fancybox 登录元素，您可以看到没有加载任何脚本。

因此，您需要在主页上使用单独的代码来处理登录位加载时的脚本。您可以为此使用 fancyboxonComplete选项。因此，在您的代码中为登录链接初始化 fancybox 位，请$("#various3").fancybox();改用：

$("#various3").fancybox({onComplete: function() {
    var $gallery = $('#gallery');
    var $titles = $gallery.find('div[title]');
    $titles.click(function() {
        var $this = $(this);
        if ($this.hasClass('off')) {
            $titles.removeClass('on').addClass('off');
            $this.removeClass('off').addClass('on');
            $gallery.find('.show').removeClass('show').addClass('hide').hide()
                .end().find('#' + $this.attr('title')).removeClass('hide').addClass('show').show();
        }
    });
});

请注意，这是在您的主页上。现在，每次fancybox 加载内容时都会运行此代码。您可以在这里使用您自己的 tabbed.js javascript 代码而不是我发布的 jQuery 代码，但是两者都可以正常工作。

请注意，您在这里做的一件事根本上是错误的。您需要 login.php 文件作为独立页面的唯一原因是如果用户没有启用 javascript - 在这种情况下，链接会将用户带到该页面而不是加载 fancybox。但是，如果没有 javascript，您的登录页面将无法正常工作。没有 javascript 的用户无法注册到您的站点。

您应该编写独立的 login.php 页面，这样它就可以在没有 javascript 的情况下正常工作，然后完全通过代码添加选项卡功能。login.php 独立页面上不需要任何 javascript，因为任何访问该页面的用户都不会启用 javascript。

使页面在没有 javascript 的情况下工作的简单方法 - 使 #Register 和 #Login div 最初都具有“显示”类。然后将我上面的 jQuery 代码的第一部分更改为：

var $gallery = $('#gallery');
$gallery.find('#Register').removeClass('show').addClass('hide');
var $titles = $gallery.find('div[title]');

比较长，希望对你有所帮助。如果您有问题，请告诉我。

于 2011-11-12T17:54:01.740 回答