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; 
}

它似乎不起作用..：oi只能在链接上按住鼠标时看到图像的变化，但是当我点击它时，图像保持不变，就像它不是活动标签一样。：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。此外，每个链接都有一个默认的lookA。

现在在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完成。

活动时更改链接图像

2 个答案: