Make the entire LI clickable

/ Published in: jQuery
Save to your folder(s)

This trick is very useful when you're using UL list to make a menu. What it does is, when you click on the LI area (outside of the link), it will search for the url in the anchor tag and execute the link:

Copy this code and paste it in your HTML
  1. <!-- HTML -->
  2. <ul>
  3. <li><a href="home">home</a></li>
  4. <li><a href="home">about</a></li>
  5. <li><a href="home">contact</a></li>
  6. </ul>
  8. //JavaScript
  9. <script type="text/javascript">
  10. $(document).ready(function(){
  11. $("ul li").click(function(){
  12. //get the url from href attribute and launch the url
  13. window.location=$(this).find("a").attr("href"); return false;
  14. });
  15. });
  16. </script>


Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.