带有 fancybox 的选项卡内容

Question

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

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

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

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

$(文档).ready(function() {

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

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

              }); 

链接到精美的盒子

登录/注册

login.php 的 tabbed.js

onload = function() { var e;变量我 = 0;而（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

请帮忙！！！！

Answer 1

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

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

因此，您的主页上需要单独的代码来处理加载时登录位的脚本。您可以使用 fancybox onComplete 选项来实现此目的。因此，在初始化登录链接的 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 最初都具有“show”类。然后将上面的 jQuery 代码的第一部分更改为：

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

相当长，但我希望对您有所帮助。如果您有问题，请告诉我。