Change Background On Li Element On Click

The thing I want to do is when a user clicks on a link, the background should change to Indicate which Link the user has clicked on. I'm trying to do this with jQuery: As you can

Solution 1:

The issue is because the .activeLink class is not specific enough for it to override the default .menuLink li styling. You need to make it more specific. Also note that you can use this to reference the clicked element instead of building the id selector string manually. Try this:

$('.menuLink').click(function() {
  $(this).addClass('activeLink');
});

.menuLinksli {
  color: #ffffff;
  float: left;
  margin-left: 2px;
  width: 115px;
  height: 60px;
  background-color: #004f80;
  text-align: center;
  font-size: 13px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}
.menuLinksli:hover {
  background-color: #006eb3;
  cursor: pointer;
}
.menuLinkslia {
  color: #fff;
}
.menuLinksli.activeLink {
  color: #004f80;
  background-color: #fff;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulclass="menuLinks"><liclass="menuLink"id="tillstandshavare">Link1</li><liclass="menuLink"id="stationer">Lnk2</li><liclass="menuLink"id="formular">Link3</li><liclass="menuLink"id="fragor">Link4</li><liclass="menuLink"id="installningar">Link5</li></ul>