Anchor menu different css at the active menu

Question

I have a one page website with 1 always at top menu with anchor links. I'd like to change the color of the menu when its active. I don't know how could I get which menu is active at which anchor link I passed or something.

Here's what I have:

<div id="menu" class="default">
    <img align="left" width="8%" height="100%"src="<?php bloginfo('template_directory'); ?>/pics/a.jpeg"/>
    <nav>
        <ul>
            <li><a class="active" href="#menu1">menu1</a></li>
            <li><a class="inactive" href="#menu2">menu2</a></li>
            <li><a class="inactive"  href="#menu3">menu3</a></li>
            <li><a class="inactive"  href="#menu4">menu4</a></li>
        </ul>
    </nav>
</div><!-- close menu -->

#inactive {
    color: #fff;
    text-decoration: none;
    padding: 3px 7px;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#active {
    color: #deb48f;
    text-decoration: none;
    padding: 3px 7px;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

The color is changed. I need a javascript that changes the class of these menus based on which one is on the screen now.

Answer 1

This is not static html function, so you must use javascript (simplicity jQuery) for this magic.

Next to do: 1: it must be determined witch the event triggers the happend 2: how it will change the color

First is the click event on element which is trigger the action. This is in jQuery: $(selector).on('click', function() { *function body* });

Second, you must define only the .active class with background-color:

.active {
    background-color: black;
}

And when you clicked the navigation element, remove .active class from all element, and add for only the clicked.

function body =

$allmenulink = $('#mynav a'); 
$allmenulink.removeClass('active'); 
$this = $(this)
$this.addClass('active');

Here is full example:

// click event on a element in mynav
$('#mynav a').on('click', function() {
  // select all menu link element
  $allmenulink = $('#mynav a');
  // remove .active class from all menu element
  $allmenulink.removeClass('active');
  // clicked element
  $this = $(this)
    // add .active class for clicked element
  $this.addClass('active');
});

li {
  list-style: none;
  float: left;
}
li>a {
  color: white;
  text-decoration: none;
  background-color: blue;
  padding: 10px;
}
/* set background for menu item with active class */

li>a.active {
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="mynav">
  <ul>
    <li><a class="active" href="#menu1">menu1</a>
    </li>
    <li><a class="" href="#menu2">menu2</a>
    </li>
    <li><a class="" href="#menu3">menu3</a>
    </li>
    <li><a class="" href="#menu4">menu4</a>
    </li>
  </ul>
</nav>

Answer 2

An easy way to do this would be to use bootstrap with the scrollspy plugin, if you're willing to add bootstrap to your website.
http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

Also, as a side note, I would remove the need for an inactive class by adding an id="tabs" to the nav tag and changing the css to

#tabs a{
    color: #fff;
    text-decoration: none;
    padding: 3px 7px;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#tabs a.active{
    color: #deb48f;
}

Note that the # denotes the id of a tag, and a period is used to denote the css of a tag.

This my first ever post on StackOverflow, so I hope I did this right and that this helped!

Edit:
Here's some jQuery you can add after your div so that you'll at least be able to change the colors of the tabs when you click on them:

<script>
    $('li > a').click(function() {
        $('li > a').removeClass();
        $(this).addClass('active');
    })
</script>

Answer 3

You can remove the inactive class from the HTML and rename the CSS block to nav ul li a instead of .class. Then use this jQuery:

$(document).ready(function(){
    $("a").click(function(){
        $(".active").removeClass("active");
        $(this).addClass("active");
    });
});

Here is the modified HTML:

<div id="menu" class="default">
    <img align="left" width="8%" height="100%"src="<?php bloginfo('template_directory'); ?>/pics/a.jpeg"/>
    <nav>
        <ul>
            <li><a class="active" href="#menu1">menu1</a></li>
            <li><a href="#menu2">menu2</a></li>
            <li><a href="#menu3">menu3</a></li>
            <li><a href="#menu4">menu4</a></li>
        </ul>
    </nav>
</div><!-- close menu -->

And the CSS:

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 3px 7px;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.active {
    color: #deb48f;
    text-decoration: none;
    padding: 3px 7px;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}