任何“黑客”可以让同一个 CSS 按钮充当切换开关并在 iframe 中打开 2 个不同的 url？

Question

我想要一个具有两种状态（例如开/关颜色）的切换按钮，并且根据每个状态，我希望它在 iframe 中打开不同的 URL（稍后将被隐藏），像

?cmd=turn_on

这样的 URL，

?cmd=turn_off

。

这可以在没有 JavaScript 的情况下完成吗？ 也许通过 CSS，或者通过链接状态（如 a.active{}）？

我认为定义两个按钮并隐藏单击的一个按钮并显示另一个按钮可能会起作用？！不知道如何通过 CSS 做到这一点。

基本上我希望它能够替代

xml http request

，我认为唯一的方法就是让它在 iframe 中打开 URL。

在另一次尝试中（

不是下面的代码）按钮可以使用html

checkbox正确切换，然后像input:checked{}

一样使用CSS，但我无法使用

a

链接标签包装该复选框，它不再充当切换/复选框。 

我认为这可以通过一些 CSS Voodoo 来完成:)

a.my_button:link{
    color:#7A1473;
}
a.my_button:visited{
    color:#7A1473;
}
a.my_button:active{
    color:#FFCC00;
}

<iframe name="my_iframe"></iframe>

<p>
<a class="my_button" href="/?cmd=turn_on" target="my_iframe">turn on</a> | 
<a class="my_button" href="/?cmd=turn_off" target="my_iframe">turn off</a>
</p>

不幸的是，不，如果不使用 javascript，你就无法实现这一点，因为单独的 css 无法动态更改 iframe 的 href，但你可以通过显示 iram 和一些样式来以另一种方式做你想做的事情，这样它不会看起来像 iram 并将按钮放在每个页面中（

Answer 1

和

/turn_off.html

），如下所示：

turn_on.html

<style>
    /* some style */
</style>
<p>
    <a class="my_button" href="/turn_off.html">turn off</a>
</p>

turn_off.html

<style>
    /* some style */
</style>
<p>
    <a class="my_button" href="/turn_on.html">turn on</a>
</p>

index.html

<style>
    iframe {
        border: none;
    }
</style>
<iframe name="/turn_off.html"></iframe>

注意：这不是一个好的做法，所以我强烈建议您以正确的方式使用 javascript，但您暂时可以帮助自己。