-3

このタブセットは私にとってはうまくいきます。しかし、CSS ロジックとその背後にあるセマンティクスがわかりません。特に、最後の CSS 項目 (私が思うに!) が、次にクリックするまで最後にクリックしたタブを強調表示したままにするのにどのように役立つか. 誰か説明してくれませんか。

CSSは次のとおりです。

/* <<<<<<<<<<<<<<<<<<< start menu_ main >>>>>>>>>>>>>>>>>>>>>*/
#tabmenu 
{   margin: 0;
    padding: 0;
    list-style-type: none;
}

#tabmenu li 
{   float: left;
    display: block;
    overflow: hidden;
    line-height: 1.6em;
    padding: 0px 5px 0px 5px;
}

#tabmenu a
{   display: block;
    color: #ffffff;
    background: #E28F58; /*brown*/
    /*border-bottom: 1px solid #333333;*/
    text-decoration: none; 
    padding:0 12px 0 12px; 
}

#tabmenu a:hover 
{   background: #333333;
    border-bottom: 3px solid #333333; 
}

#tabmenu a.active, #tabmenu a.active:hover 
{   background: #333333;
    border-bottom: 3px solid #333333;
}

/* <<<<<<<<<<<<<<<<<<< end menu_main >>>>>>>>>>>>>>>>>>>>>*/

インデックス ページの HTML は次のとおりです。

<ul id="tabmenu">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="programs_ar.html">Programs</a></li>
<li><a href="students.html">Student Work</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="staff.html">Staff</a></li>
<li><a href="about_activity.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
4

2 に答える 2

0

おそらく、各ページは単一のメニュー項目に「アクティブな」クラスを設定しており、次のセレクターによって照合されます。

#tabmenu a.active
{   background: #333333;
    border-bottom: 3px solid #333333;
}

新しいマークアップで新しいページに移動すると、古い選択は「失われ」、要素がclass="active"セレクターと一致するようになりました。

例：

<!-- you've marked the "home" link as active -->
<a class="active" href="index.html">Home</a>

<!-- user clicks another link -->
<!-- browser navigates -->

<!-- on this page, "student work" has a class name of "active" -->
<a class="active" href="students.html">Student Work</a>

<!-- "home" is no longer selected; "student work" is -->

別の言い方をすれば、クラス名が「active」のアンカーはすべてセレクターに一致します。この例のように、複数のアイテムが一致することを妨げるものは何もありません。

于 2013-04-21T20:00:12.137 に答える