Clicking on <li> the <a> link also work

Asked

Viewed 1,419 times

5

I always have that question, look at that:

I have a menu, with ul and li:

<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, so when I position or click on li the link to a work? Because, for example, it only works if I click on a, but, if I click off, in case, on li, does not work, the link a non-active.

html css

3 answers

3

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>

  • 1

    This answer should be marked as the correct one.

  • Could you explain, Renan, the answer of Evandro? In several places I looked, I was told to do it his way. Because if not, every menu I create, I’ll have to make a script.

  • @Lucascarvalho Mathias' response only needs to be applied once to the entire site, so it does not require repetition. Evandro’s response does not seem ideal because it engages application behavior in her style. You can introduce a bug into your system just by changing the CSS.

  • For example, here in Sopt, in the menu, the tag a is inline-block, this is not ideal in the case?

  • 1

    @Lucascarvalho inline-block allows you to set a width to tag "a" and at the same time put an item next to each other, Sopt’s solution is correct too, and in my view none of this changes the behavior of the application as Renan states, it only changes the style, and if you run the site without CSS the links will work normally, and the code will be validated as correct in any HTML validator. This debate here proves that there are several ways to solve the same problem, some simple, some more complex and some not recommended. But maybe only Mr. Tim Bernes Lee knows the right one

2

I believe that using Javascript (and especially jQuery) to change the natural behavior of the element li also not the best solution. This is a classic case of delegating a function to an element that is not the most suitable.

What is the impact of changing the default behavior of an HTML element?

If the event in question redirects the user to another page, this event must be delegated to the element a and not to the element li. Implement the second is to break the semantics of HTML. Now, if the intention is that the element behavior a is applied throughout the element li, the clearest solution is: to make the element a occupy the whole element li.

li {
  position: relative;
}

li > a {
  position: absolute;
  width: 100%;
  height: 100%;
}

a:hover {
  background: green;
}
<ul>
  <li><a href="/inicio">Inicio</a></li>
  <li><a href="/sobre">Sobre</a></li>
  <li><a href="/contato">Contato</a></li>
</ul>

Does not hurt HTML semantics and does not use Javascript.

1


If you set in CSS 

li a {
   display: block;
}

The "A" tag is the same width as the "LI", consequently everything is linked.

  • 1

    That’s browser-dependent behavior, isn’t it? Aside from changing application behavior through your style.

  • @Renan this should work in any browser, basically the display:block forces the link to behave as a div, by default occupies 100% of the available area, thus being the same size for the link and for the list item.

  • 1

    I see problems in the approach suggested by @LINQ that reverses tags. Even knowing that it works, and that in HTML5 these DOM rules are more liberal, it doesn’t seem like the ideal way...

  • I agree that the @LINQ response is not ideal and I’ve already left comment on it. But again I say that this answer combines logic with style, which is bizarre. You change the behavior of your code and can generate a bug just by changing the CSS.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.