[Demo] Change Background Color of Tab on Tab Click

[Demo] Change Background Color of Tab on Tab Click

by Megi93

HTML

<h2>Click on the Tabs to see how the Background Color changes on Click</h2>

<div id="header">
  <div id="menu">
    <ul class="current_page_itemm">
      <li class="current_page_item"><a href="#">Home</a>

      </li>
      <li><a href="#">Jobseeker Profiles</a>

      </li>
      <li><a href="#">Employer Profiles</a>

      </li>
      <li><a href="#">Jobs</a>

      </li>
      <li><a href="#">More</a>

      </li>
    </ul>
  </div>
</div>

CSS

#menu ul li.selected {
  background: #910000;
  color: #FFFFFF;
}

#menu ul {
  margin: 0;
  padding: 25px 0 0 20px;
  list-style: none;
  line-height: normal;
}

#menu li {
  display: block;
  float: left;
  background: black;
}

#menu a {
  display: block;
  float: left;
  margin-right: 17px;
  padding: 5px 8px;
  text-decoration: none;
  font: 20px Georgia, "Times New Roman", Times, serif;
  color: #FFFFFF;
}

#menu a:hover {
  text-decoration: underline;
  background: #910000;
  color: #FFFFFF;
}

#menu a:active {
  background: #910000;
  color: black;
}

JavaScript

$(document).ready(function() {

  $('#menu ul li a').click(function(e) {
    $('#menu ul li').removeClass('selected');
    $(e.currentTarget).parent('li').addClass('selected');
  });

});