How can I get href to follow a link when using jQuery

Question

I'm having trouble getting <a href="#"> to follow the link when jQuery is activated.

<ul>
    <li class="menuOption"><a href="#"></a>Home</li>
    <li class="menuOption"><a href="#"></a>About</li>
</ul>

I looked at a few posts but they involve people trying to prevent a link being followed by using preventDefaults(); in the .js file. I'm not sure what my solution would be.

Answer 1

You Need to put the link text inside of the anchor tags. Right now, the a tag is empty and so therefore un-clickable.

Try this instead:

<ul>
    <li class="menuOption"><a href="#">Home</a></li>
    <li class="menuOption"><a href="#">About</a></li>
</ul> 

Answer 2

There can be multiple ways to accomplish this :- 1. One way is to change your href to point to javascript:void(0) rather than # so the code should be

  <ul>
      <li class="menuOption"><a href="javascript:void(0)"></a>Home</li>
       <li class="menuOption"><a href="javascript:void(0)"></a>About</li>
  </ul>

You must also return false from your jquery function if you have some url written and onclick is present

 <ul>
          <li class="menuOption"><a href="www.google.com" onclick="somefun)()"></a>Home</li>
      </ul>

Dont forgot to return false from your function function somefun(){ return false; }