Question

这里有趣（而且相当复杂）的问题......
我所拥有的是一个页面，顶部有两个iframe和一组链接，每个链接包含一个带有图像背景的div。我想要的是当点击链接时两个iframe的内容改变（到两个单独的html文档），并且链接的父div的背景图像也改变。但是，我也希望父div在单击不同的链接时自动更改回原始类（即我有两个类，'active'和'waiting'。当点击链接时（其内容随后显示在iframes）我希望它切换到类'active'。但是，在所有其他时间，（包括在点击不同的链接并变为活动状态之后），我希望它回到使用'waiting'类。）< / p>

这是我当前的代码/标记：

使用Javascript：
function changeFrame(link) { $('#first iframe').src=link.href; $('#second iframe').src=（这里是第二个链接，不确定如何定义） link.ParentNode.addclass("activebutton");

HTML：
<div class="waitingbutton"> <a href="yes.html"（此处某处是第二个iframe的第二个链接）class="waitingbutton" onclick="changeFrame(this); return false;">Button Text</a> </div>
（在此之后还有四个div，每个相同的栏按钮文字和链接）

我怀疑你可以说，我真的只是在这里猜测。仍然不太熟悉Javascript，希望有人可以帮助我。

Answer 1

你似乎在使用jQuery。

这是一种丑陋的方式;但它的确有效：

<a href="yes.html" secondary-href="somewhere-else.html" class="waitingbutton" onClick="return changeFrame(this);">Button Text</a>

你的JavaScript：

function changeFrame(link) {
    $('#first iframe').attr("src", $(link).attr('href'));
    $('#second iframe').attr("src", $(link).attr('secondary-href'));
    return false;
}

请注意，在没有任何onClick处理程序的情况下执行此操作会更加惯用jQuery，而只是从头开始在<head> / <script>中初始化它：

<script type="text/javascript">
    $(function() {
        $("a.iframe-link").click(function(event) {
            $("#first iframe").attr("src", $(link).attr("href"));
            $("#second iframe").attr("src", $(link).attr("secondary-href"));

            // Whatever used to be the activebutton, make it 'waitingbutton', and remove
            // the 'activebutton' class.
            $(".activebutton").
                addClass("waitingbutton").
                removeClass("activebutton"); 

            // Remove .waitingbutton from this, add .activebutton.
            $(this).removeClass("waitingbutton").addClass("activebutton");

            // Don't allow the link's default action (to follow the href in the normal
            // way).
            event.preventDefault();
        });
    });
</script>

然后：

<a class="iframe-link waitingbutton" href="yes.html" second-href="whatever.html">Hello!</a>

链接更改父<div>的类，两个<iframe>元素的内容</iframe> </div>

1 个答案: