-1

CSS：

// Highlight to show that the user is viewing current tab.    
// css for the active tab

.HeaderTabs li.tab a { 
   display: block;    //anchor tab 
   padding: 12px 8px 12px 8px;
}

.HeaderTabs li.tab a:link {
   outline: none;  //link works 
   text-decoration: none;
}

.HeaderTabs li.tab a:hover {  //this works hovering over the text
   color: #A4C639;
   font-weight: bold;
}

.HeaderTabs li.tab a:active { //this doesnt work 
   color: #A4C639;
   font-weight: bold;
}
4

5 に答える 5

5

:activeセレクターは、要素がアクティブなときに動作します。たとえば、要素をクリックしたままにすると、スタイルが適用されます。現在アクティブなタブのスタイルを設定する場合は、jQueryまたはサーバー側プログラミングを使用する必要があります。スタイルを設定することはできません。:activeセレクターを使用するだけで現在アクティブなタブ

その他のリファレンス

于 2012-10-08T09:53:35.710 に答える
2

「アクティブ」の意味を混乱させているかもしれません。CSSの「：active」は、リンクがクリックされたときのリンクの状態を示します（一部のブラウザではミリ秒単位の場合があります）。現在のページを参照するタブの外観を変えたい場合は、それに何らかのセレクターを追加して、スタイルを変える必要があります。

于 2012-10-08T09:58:06.277 に答える
1

ユーザーがリンクをクリックすると、アクティブ状態がリンクに設定されます。ユーザーがクリックを離すと、リンクはアクティブではなくなります。アクティブなリンクの色（ホバー状態とは異なる色）を変更すると、違いがわかります。

JavaScriptを使用して、またはサーバー側でタブが効果的に選択されたら、独自の「選択された」クラスをリンクに追加する必要があります。

于 2012-10-08T09:56:21.613 に答える
1

：activeは、リンクをクリックした瞬間にのみ機能し、mouseUpを実行すると「アクティブ」ではなくなると思います。

そのタブを色のままにしておきたい場合は、別のクラスを定義するだけです。

.activeTab {
color: #A4C639;
font-weight: bold;
}

そして、javascriptまたはjqueryを介して、そのクラスをタブに追加します。

于 2012-10-08T09:58:22.653 に答える
1

この疑似クラスは、アクティブ化の過程にあるすべての要素と一致します。これは、たとえば、リンクをマウスでクリックしている間、マウスボタンが押された時点から再び離される時点まで適用されます。疑似クラスは、アクティブなページまたは現在のページへのリンクを意味しません。これは、CSS初心者の間でよくある誤解です。

これを読む

 li class="current"

.HeaderTabs li.tab a.current {
color: #A4C639; 
font-weight: bold; 
 }

CSSでの追加のコメントは//、Javascriptでは行われません。使用する/* Cooment */

例

HTML / MARKUP

ファイル=index.html

<ul>
<li class="current"><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>

ファイル=abouts_us.html

<ul>
<li><a href="index.html"</a>Home</li>
<li class="current"><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>

ファイル=news.html

<ul>
<li><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li class="current"><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>

ファイル=products.html

<ul>
<li><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li class="current"><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>

ファイル=contact_us.html

<ul>
<li><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li class="current"><a href="contact_us.html"</a>Contact Us</li>
</ul>

スタイル/CSS

li.current
{
color: #A4C639; 
font-weight: bold;
}

class="current"さらに、の<a>代わりにを与えて<li>使用する必要があるかもしれません

a.current
{
color: #A4C639; 
font-weight: bold;
}
于 2012-10-08T09:59:14.810 に答える