活動時更改鏈接圖片

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:focus {...}

這（不可避免地）施加可變跨瀏覽器，但是。

Stu Nicholls在CSS Play上進行了演示，此演示旨在移除焦點元素的默認輪廓，並以其他方式設置單擊元素的樣式。

大概這可以通過jQuery更可靠地實現，但它可以用CSS來完成。

Answer 2

我沒有看到訪問的風格？只有活動和懸停。

添加

#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> 

使每一個環節都通過其類被refered來，就是ImageLink的。每個鏈接都有一個默認的lookA。

jQuery中

現在（我知道你沒有指定的jQuery但使用它比普通的JavaScript簡單100倍）：

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

}); 

所以在點擊該鏈接後，它從任何其他鏈接刪除lookB和僅將它應用於點擊鏈接。

希望這會有所幫助。