Make an li element clickable (not a link)

Question

There is a very similar question asked here Make A List Item Clickable (HTML/CSS) that I read for help but I couldn't get it to work. I have a link on my webpage that looks like this

<a type="button" data-toggle="dropdown" ...>

that when clicked shows a menu containing an unordered list.

<ul role="menu" ...>
   <li role="presentation" value="thing" onclick="myFunction()"...> <span>some</span> </li>
</ul>

Now what I want is for this li element be clickable and act as if it is a link with the cursor turning into a hand and change color on hover. Then when one of the li elements in the unordered list is clicked I want the function "myFunction" to to run.

^^ What Evan said. Without saying that, this is just a duplicate, and will be closed accordingly. — T.J. Crowder, Jul 31 '15 at 07:55
Note: What you've put in `type` is incorrect, `type` on `a` elements isn't (remotely) what `type` on `input` or `button` is. See [the specification](http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element) for details. — T.J. Crowder, Jul 31 '15 at 07:56
heres a solution using jquery `$("UL li").on('click', function (e) { window.location = "http://google.com"; e.preventDefault(); });` — Satinder singh, Jul 31 '15 at 08:04
I honestly don't see how it is a duplicate when every answer in the supposed duplicate uses a link. Obviously I want to select, not route. — Rebam1, Jul 31 '15 at 08:07

score 0 · Accepted Answer · answered Jul 31 '15 at 07:56

0

Example code:

li.link span {
  color: blue;
  text-decoration: none;
  cursor: pointer;
}
li.link span:hover {
  color: #00f;
  text-decoration: underline;
}

<ul role="menu">
   <li role="presentation" class="link" value="thing" onclick="myFunction()"><span>Text</span></li>
</ul>

answered Jul 31 '15 at 07:56

Inkbug

1,682
1
10
26

Ok I don't know what I did wrong the twentyeleven times I tried the onclick before on my elements, but now it worked.. So then yes, I suppose it is a duplicate question. Either way, thank you for your answer Inkbug :) – Rebam1 Jul 31 '15 at 08:17

Make an li element clickable (not a link)

1 Answers1