-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, #tabmenu a.active:hover 
{   background: #333333;
    border-bottom: 3px solid #333333;
}

<a>标签可以处于 3 种状态中的 1 种状态。

  • 未访问：这是默认状态。
  • 已访问：如果您之前单击它，则会更改其颜色。
  • Active：即当前点击的<a>

该 CSS 规则告诉浏览器更改<a>#tabmenu 内任何 Active 的背景。

表示<a>您当前正在激活的将被“突出显示”。

该规则还说，如果您将鼠标悬停在此 activate<a>上，它将具有此背景颜色。

因此，当您单击另一个<a>时，新单击的<a>将是已激活的<a>，因此它将采用该背景颜色，而前一个<a>将是已访问的<a>，因此不会采用该颜色。

于 2013-04-21T19:58:58.310 回答
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 回答