html – by clicking on<li> the link <a>also works</a>

Question:

I always have this doubt, look:

I have a menu, with ul and it read:

<ul>
  <li><a href="/inicio">Inicio</a></li>
  <li><a href="/sobre">Sobre</a></li>
  <li><a href="/contato">Contato</a></li>
</ul>

How do I, for what, when I position or click on li the link a work? Because, for example, only works if I click on a , but if I click off, in this case, the li does not work, the link a not active.

Answer:

Try something like:

$(document).on("click", "li", function() {
  window.location = $(this).find("a").attr("href");
});
ul {
  list-style: none;
}

li {
  width: 100px;
  background: gray;
  margin: 0 0 10px;
  cursor: pointer;
}

li:hover {
  background: yellow;
}

a {
  text-decoration: none;
  margin: 0 0 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="/inicio">Inicio</a></li>
  <li><a href="/sobre">Sobre</a></li>
  <li><a href="/contato">Contato</a></li>
</ul>
Post Views: 0
Scroll to Top