Question

我仍然很擅长编码，并为自己的进步感到自豪。我搜索并搜索无法解决我的问题。我的导航标签工作正常，但我似乎无法弄清楚如何使我的活动页面标签与悬停颜色相同。我使用了http://blixt.org/articles/tabbed-navigation-using-css#section=introduction上的文章中的代码。我联系了作者，但没有收到他的回复。我找到的唯一解决方案需要在不使用选项卡的情况下将我的代码完全更改为一个。我曾尝试在“检查元素”功能中工作，但没有取得任何进展。我的网站是http://actonrecovery.com/。如果可以，请帮忙。

这是我的HTML代码：

<!--my ordered list for a table of contents TOC-->
<ol id="toc">
<li><a href="recovery.html" id=“recovery”><span>Coach</span></a></li>
<li><a href="coaching.html" id=“coaching”><span>What Is Coaching?</span></a></li>
</ol>

这是我的css：

/*style the default state for each list item (tab) inside the TOC*/
ol#toc { height: 2em; line-style: none; margin: 0; padding: 0; }
/*padding the left part so it won't be covered by the background image of the <a> element*/
ol#toc a { background: #bdf url(tabs.gif); color: #008; display: block; float: left; height: 2em; padding-left: 10px; text-decoration: none; }
ol#toc a:hover { background-color: #3af; background-position: 0 -120px; }
ol#toc a:hover span { background-position: 100% -120px; }
ol#toc li { float: left; margin: 0 1px 0 0; }
/*offset the tab image when a tab is selected*/
ol#toc li.current a { background-color: #48f; background-position: 0 -60px; color: #fff; font-weight: bold; }
ol#toc li.current span { background-position: 100% -60px; }
ol#toc span { background: url(tabs.gif) 100% 0; display: block; line-height: 2em; padding-right: 10px; }

Answer 1

根据您的CSS，您应该将课程current添加到li

<ol id="toc">
 <li><a href="recovery.html" id="recovery"><span>Coach</span></a></li>
 <li class="current"><a href="coaching.html" id="coaching"><span>What Is Coaching?</span></a></li>
</ol>

此外，您的id还有其他类型的引用（“”），将其更改为常规引号（“”）

Answer 2

您可以使用与悬停伪代码相同的背景颜色轻松添加“当前”类。我创建了一个jsfiddle来向你展示我的意思。

HTML：

<ol id="toc">
<li><a href="recovery.html" id=“recovery”><span>Coach</span></a></li>
<li><a href="recovery.html" id=“recovery”><span>Coach</span></a></li>
<li><a href="recovery.html" id=“recovery”><span>Coach</span></a></li>
<li class="current"><a href="coaching.html" id=“coaching”><span>What Is Coaching?</span>    </a></li>
</ol>

CSS：

li {
  background: #bdf;
  color: #008
}
li:hover {
  background: #48f;
}
.current {
 background: #48f;
 }

http://jsfiddle.net/rynslmns/A29cC/1/

您需要将当前类添加到您要显示“当前”的当前页面的html中

Answer 3

在处于活动状态的标签页上，只是它的“活动”类或其他您想要调用它的类。像这样：

<强> HTML：

<!--my ordered list for a table of contents TOC-->
<ol id="toc">
<li><a href="recovery.html" id=“recovery”><span>Coach</span></a></li>
<li class="active"><a href="coaching.html" id=“coaching”><span>What Is Coaching?</span></a></li>
</ol>

<强> CSS：

li 
{
  background: #bdf;
  color: #008
}

li:hover 
{
  background: #48f;
}
.active 
{
 background: #48f;
}

这就是我为我的网站所做的。

Answer 4

如果您只有一个静态HTML和CSS页面，则可以将.current类添加到当前页面选项卡。例如，在主页上将当前类添加到主页选项卡等等。

突出显示我的活动标签

4 个答案: