Highlighting my active tag - html

Question

I am still pretty new to coding and feel proud of my progress. I have searched and searched to no avail for a solution to my problem. My navigation tabs work correctly, but I can't seem to figure out how to make my active page tab be the same color as the hover color. I used the code from an article at http://blixt.org/articles/tabbed-navigation-using-css#section=introduction. I contacted the author, but have not received a response from him. The only solutions I have found entail completely changing my code to one without using the tabs. I have tried working within the "inspect element" feature, but have made no progress. My webiste is http://actonrecovery.com/. Please help if you can.
Here is my html code:
<!--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>
Here is my 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

According to your css, you should add class current to li
<ol id="toc">
<li><span>Coach</span></li>
<li class="current"><span>What Is Coaching?</span></li>
</ol>
Also, your id has some other type of quote(” ”), change it to normal quotes(" ")

Answer 2

You can easily add your 'current' class with the same background color as your hover pseudocode. I created a jsfiddle to show you what I mean.
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/
You would need to add your current class to your html for the current page you would like to show 'current'

Answer 3

On the tab that is active, just it's class to "active" or whatever else you want to call it.
Like this:
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;
}
That is what I did for my website.

Answer 4

If you just have a static HTML and CSS page you could add the .current class to the current pages tab. For example on the home page add the current class to the home page tab, etc. etc.