<a> 上的 HTML Kickstart 灯箱类答案

【问题标题】：HTML Kickstart light box class on <a><a> 上的 HTML Kickstart 灯箱类
【发布时间】：2014-01-10 11:11:11
【问题描述】：

我在获取要在灯箱中显示的链接时遇到了一点问题。

我正在使用 HTML Kickstart，它使用了 fancybox（我认为）。当我单击一个按钮时，将调用以下函数。它确实改变了 innerHTML，但由于某种原因，id='inline' 被忽略了。

我复制并粘贴了 HTML 代码 <a id='inline' href='http://sample.mylink.com'>New Link</a> 到我的网页，它按预期工作。当我单击按钮时，链接会在灯箱中打开。

有人知道为什么当我通过 javascript 执行此操作时 id 会被忽略吗？

编辑

Javascript

function loadGoGo() 
{
    alert('Boo!');
    var link = document.getElementById("GoGo");
    link.innerHTML = "<table class='sortable'>" +
                    "<tr>" +
                        "<td>" +
                            "<a id='inline' href='reply.html'>Boo Link</a>" +
                        "</td>" +
                    "</tr>" +
                "</table>";
}

HTML

<Button onClick="loadGoGo()" >Load Go Go Link</Button>
<div id="GoGo">
</div>

jQuery

$('a#inline').fancybox({
        overlayOpacity: 0.2,
        overlayColor: '#000'
    });

这是我使用的实际代码，css 是fancybox 使用的任何东西。我原以为这可以与 id 选择器一起使用。

【问题讨论】：

你能在这里提供css类描述吗？
有异常打开控制台

标签： javascript lightbox innerhtml html5-kickstart

【解决方案1】：

也许你的 css 类有额外的选择器，它可能是

.parentClass .lightbox { /**css here*/}

正如我上面提到的，问题出在 css 选择器中。 More info 阅读信息：基于关系部分的选择器。我不确定灯箱是如何工作的，但尝试在 A 的父元素上设置类让我们说 td 然后选择器

.lightbox a {styles here}

将起作用，这意味着该样式将应用于具有类灯箱的元素内的所有元素

【讨论】：

嘿伙计，我更新了我的问题。我试图通过使用 id 选择器来解决整个问题，但我仍然遇到同样的问题。这应该不改变css吗？

【解决方案2】：

是的，我不知道问题出在哪里，但我找到了解决方法。

我只是在点击链接时调用一个 javascript 函数，然后调用一些 jQuery。

加载innerHTML的Javascript函数

function loadGoGo() 
{
    alert('Boo!');
    var link = document.getElementById("GoGo");
    link.innerHTML = "<table class='sortable'>" +
                    "<tr>" +
                        "<td>" +
                            "<a href='javascript:void(0);' onClick='javascript:showPopup();'>Boo Link</a>" +
                        "</td>" +
                    "</tr>" +
                "</table>";
}

HTML

<Button onClick="loadGoGo()" >Load Go Go Link</Button>
<div id="GoGo">
</div>

在灯箱中打开锚点的额外 Javascript 函数

function showPopup()
{
    $.fancybox({
        href            : 'reply.html',
        overlayOpacity  : 0.2,
        overlayColor    : '#000'
    });
}

【讨论】：