如何在同一页面上获得不同样式的链接，并且仍然使用颜色框

Question

我正在构建一个带有几个样式链接的网页，比如：

<a class="green" href="green.htm">Link is green and becomes blue on mouse over</a>
<a class="red" href="red.htm">Link is red and becomes yellow on mouse over</a>

然后我有我的css类，如下所示：

a.green {   color: green; }
a.green:hover { color: blue; }

a.red {       color: red; }
a.red:hover { color: yellow; }

但我希望在颜色框中打开green.htm和red.htm

如何在同一页面上获得不同样式的链接，并且仍然使用颜色框？

更新：我采用了onclick事件来激发色盒效果。

<a class="green" onclick="$.colorbox({innerWidth:500, innerHeight:300, href:'green.htm'});">Link is green and becomes blue on mouse over</a>

它并不完全漂亮，但它会一直做下去，直到有一天我有了一种更干净的做事方式。

Answer 1

尝试：

<element class="red">
    all content of red.htm
</element>
<element class="green">
    all content of green.htm
</element>