Change background on li element on click

Question

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:

$('.menuLink').click(function() {
  var img = $(this).find('img');
  var id = $(this).attr('id');
  $("#" + id).addClass('activeLink');
  console.log(id);
});

.menuLinks li {
  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;
}
.menuLinks li:hover {
  background-color: #006eb3;
  cursor: pointer;
}
.menuLinks li a {
  color: #fff;
}
.activeLink {
  color: #004f80;
  background-color: #fff;
}

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

As you can see, I'm attaching the activeLink class. But the background are never changed. I think this is because of menuLinks is not overrided.

Isn't `var id = $(this).attr('id'); $("#" + id)...` the same as `$(this)..`? — Mike B, Sep 15 '16 at 07:45
@Rory his answer is correct, if you would like to read more about this specific topic, I advice this article: https://css-tricks.com/specifics-on-css-specificity/ — Nick, Sep 15 '16 at 07:51

score 2 · Accepted Answer · answered Sep 15 '16 at 07:48

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');
});

.menuLinks li {
  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;
}
.menuLinks li:hover {
  background-color: #006eb3;
  cursor: pointer;
}
.menuLinks li a {
  color: #fff;
}
.menuLinks li.activeLink {
  color: #004f80;
  background-color: #fff;
}

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

No problem, glad to help – Rory McCrossan Sep 15 '16 at 07:52 — Rory McCrossan, Sep 15 '16 at 07:52

Change background on li element on click

1 Answers1

Linked