状態のスクリプトを選択/強調表示する

htmlとcssで簡単なボタンを1つ作った。ユーザーのマウスオーバーで背景画像がリンクされると、背景画像が表示されます。私はマウスオーバー状態が残っている必要があります、下の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で同じことを達成することができますか？はいの場合はどうすればいいのか教えてください。 –

もちろん、これは同じ原理です。javascriptにアクティブなクラスを追加するリンク要素を「知らせる」方法が必要です： http://jsfiddle.net/pedrocorreia/R8pjy/9/ この例では私は最初のdiv＃tab-content要素の中の最初のアンカー要素を選択しています。しかし、サーバー側で行う方がずっと簡単です。 –

状態のスクリプトを選択/強調表示する

答えて

関連する問題