激活时更改链接图像

Question

我有 3 个链接代表我页面中一个 iFrame 的内容。当您单击每个链接时，它会重新加载该 iFrame 的内容而不重新加载页面。

我如何设置链接的图像在它处于活动状态时更改？

这是我的代码：

        <div id="tabs">
            <div id="overview">
                 <a id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
            </div>
            <div id="gallery">
                 <a target="tabsa" href="tawagpinoygallery.html">Gallery</a>
            </div>
            <div id="reviews">
                 <a target="tabsa" href="trframe.html">Reviews</a>
            </div>
        </div>
        <div id="tabs-1">
            <!--<div id="scroller">-->
            <iframe name= "tabsa" width="95%" height="100%" frameborder="0"></iframe>
        </div>

CSS 代码：

#gallery a { 
text-indent: -9999px; 
padding-top: 40px; 
background: url(../images/GalleryTab.png) no-repeat; 
height: 51px; width: 123px; position: absolute; z-index: 2; 
} 

#gallery a:active, a:hover { 
text-indent: -9999px; 
padding-top: 40px; 
background: url(../images/galleryoverview.png) no-repeat; 
height: 51px; 
width: 123px; 
position: absolute; 
z-index: 2; 
}

它似乎不起作用.. :o 当我在链接上按住鼠标时，我只看到图像的变化，但是当我单击它时，图像保持不变，就好像它不是活动选项卡一样. :o 谢谢！！

Answer 1

我没有看到已访问的样式？仅处于活动状态和悬停状态。

添加

 #gallery a:visited{}

风格，看看是否有帮助。

但我想知道这是否是您真正要问的？如果用户单击的最后一个链接，您可能希望链接与其他链接不同地显示。为此，您可能需要使用一些 javascript。

例如，如果你使用 jQuery，你可以这样做：

$("#gallery a").click(function(){
    $("#gallery a").removeClass("ActiveClass");
    $(this).addClass("ActiveClass");
});

其中 ActiveClass 是一个 CSS 类，用于适当地设置链接样式。

---

根据下面的评论进行编辑。

让我们假设您有三个看起来相同的链接（称为lookA）。您单击一个，它看起来与其他两个不同（lookB），但其他两个看起来仍然相同（lookA）。然后，您单击第二个链接。第二个链接不是lookB，其他两个链接是lookA。这听起来像你想要的吗？至少我是这样解释你的问题的。

因此，在 CSS 中创建两个类：

 .lookA {/*Style for lookA*/}
 .lookB {/*Style for lookB*/}

当然你可以使用更有意义的名字。

然后您可以为每个需要在此场景中使用的链接添加一个类，如下所示：

 <div id="tabs">
        <div id="overview">
             <a class="imagelink lookA" id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
        </div>
        <div id="gallery">
             <a class="imagelink lookA" target="tabsa" href="tawagpinoygallery.html">Gallery</a>
        </div>
        <div id="reviews">
             <a class="imagelink lookA" target="tabsa" href="trframe.html">Reviews</a>
        </div>
    </div>

这样每个链接都可以被它的类引用，也就是imagelink。此外，每个链接都有一个默认外观。

现在在 jQuery 中（我知道你没有指定 jQuery，但使用它比普通 Javascript 简单 100 倍）。：

 $(document).ready(function(){
    $(".imagelink").click(function(){
       $(".imagelink").removeClass("lookB");
       $(this).addClass("lookB");
       return true;
     });

 });

所以点击链接时，它会从任何其他链接中删除lookB，并将其仅应用于点击的链接。

希望这会有所帮助。

Answer 2

我相信选择器是：

#gallery a:focus {...}

然而，这（不可避免地）在不同的浏览器中应用。

Stu Nicholls 在CSS Play 上有一个演示，这个演示是删除焦点元素的默认轮廓，并为点击的元素设置样式。

这可能会更可靠地使用 jQuery 来实现，但它可以使用 CSS 来完成。