需要選定/突出顯示狀態腳本

我已通過html和css製作了一個簡單的按鈕。當用戶在href鏈接上進行鼠標懸停時，會出現背景圖像。我希望鼠標懸停狀態應該保持，當有人點擊下面的href鏈接是我的代碼希望你會明白我想要什麼，簡單地說我想選擇或突出顯示按鈕腳本。需要選定/突出顯示狀態腳本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
#top-Tabs{ 
    width:918px; 
    float:left; 
    margin-top: 11px; 
    font-size: 12px; 
    text-decoration: none; 
    margin-left: 60px; 
    height: 29px; 
} 

    .tab-content { 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 12px; 
     color: #000; 
     text-decoration: none; 
     float: left; 
     height: 29px; 
     line-height: 29px; 
     width: 89px; 
     text-align: center; 
     margin-right: 5px; 
     margin-left: 5px; 
    } 

    .tab-content a{ 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 12px; 
     text-decoration: none; 
     display:block; 
    } 

    .tab-content a:hover{ 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 12px; 
     color: #fff; 
     text-decoration: none; 
     background-image: url(images/top-tab-hover.jpg); 
     background-repeat: no-repeat; 
     display:block; 
    } 


    </style> 
    </head> 

    <body> 

    <!--Top Tabs Starts --> 
    <div id="top-Tabs"> 
    <div class="tab-content"><a href="#">Calls Made</a></div> 
    <div class="tab-content"><a href="#">Leads</a></div> 
    </div> <!--Top Tabs End --> 
    </body> 
    </html>

最佳-Khurram

來源

2011-05-13 Khurram Hameed

如果你的意思是要突出當前選擇的選項卡，你只需要像在這個例子中的另一個選擇添加到CSS：Tab Active state

和類添加到當前活動鏈接，如示例中所示。

來源

2011-05-13 11:33:39

是的，這是感謝佩德羅偉大的幫助，如果可能的話，我還有一個問題請回答我們可以用javascript實現同樣的事情嗎？如果是，請告訴我如何？ –

當然，這是相同的原理，所有你需要的是一種方式來「告訴」什麼樣的鏈接元素添加活動類： http://jsfiddle.net/pedrocorreia/R8pjy/9/ 在這個例子中我只是選擇第一個div＃tab-content元素中的第一個錨元素。但是，它應該是更容易做服務器端。 –

需要選定/突出顯示狀態腳本

回答

相關問題