我对编码还是很陌生，我为自己的进步感到自豪。我搜索并搜索了我的问题的解决方案，但无济于事。我的导航选项卡工作正常，但我似乎无法弄清楚如何使我的事件页面选项卡与悬停颜色相同。我使用了文章中的代码 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; }
最佳答案
根据你的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有其他类型的引号(” ”)，改成普通引号("")
关于html - 突出显示我的事件标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21469124/