Posted By

stancox on 10/22/09


Tagged

li


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

cesgra
d55beck
niceslice


Make the entire LI clickable


 / Published in: jQuery
 

URL: http://www.queness.com/post/126/useful-and-handy-jquery-tips-and-tricks

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:

  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>
  7.  
  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  

You need to login to post a comment.