Advanced Search

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:

Expand | Embed | Plain Text

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

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.