Menu CSS showing current page in a single html file

Question

I got a menu and I would like to display the current page with different color of text, or a border bottom.

I know how to do this with different html files, though, the current website im working on, is on a single file, index.html. When I click on menu, it will scroll down to the specific tab.

Does anyone know any way of styling menu in a single file?

HTML:

<div id="menu">
    <ul class="nav">
        <li><a href="#section1" class="a">aaa</a></li>
        <li><a href="#section2" class="b">bbb</a></li>
        <li><a href="#section3" class="c">ccc</a></li>
        <li><a href="#section4" class="d">ddd</a></li>
        <li><a href="#section5" class="e">eee</a></li>
    </ul>
</div>

CSS:

#menu ul li .a:hover {
    color: #6D6D6D;
    border-bottom: 2px solid #fcd017;
}

Currently I'm able to change it while hovering, but I would like to change it while i remain in the #section1 in this case.

try this for your reference http://stackoverflow.com/questions/2397370/how-to-change-the-link-color-of-the-current-page-with-css — newuser, Jun 19 '13 at 10:41
You should take a look scrollspy from bootstrap .http://twitter.github.io/bootstrap/javascript.html#scrollspy — Damien, Jun 19 '13 at 10:42
Search for the `:target` pseudo class. [Browser support](http://caniuse.com/#feat=css-sel3) is pretty good. Otherwise you'll need JS/jQuery. — kleinfreund, Jun 19 '13 at 10:53

score 0 · Accepted Answer · answered Jun 19 '13 at 11:20

 <script type="text/javascript">
           var backcolor = [
    "#aaaaaa",
    "#bbbbbb",
    "#cccccc",
     ];

function changeBGcolor(whichcolor) 
{
  if (document.body) 
   {
    document.getElementById('menu').style.backgroundcolor = '(' +  backImage[whichcolor] + ')';

    }
 }
</script>
<div id="menu">
    <ul class="nav">
        <li><a href="javascript:changeBGcolor(1)" class="a">aaa</a></li>
        <li><a href="javascript:changeBGcolor(2)" class="b">bbb</a></li>
        <li><a href="javascript:changeBGcolor(3)" class="c">ccc</a></li>
        <li><a href="javascript:changeBGcolor(4)" class="d">ddd</a></li>
        <li><a href="javascript:changeBGcolor(5)" class="e">eee</a></li>
    </ul>
</div>

Try this sometimes it will be work

Menu CSS showing current page in a single html file

1 Answers1