Posted By

smarajit_dg on 02/16/11


Tagged


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

ollejah
maltem


simple tab interface


 / Published in: jQuery
 

URL: http://byme.se/jquery/jquery-simple-tabs.html

CSS

tabs { width:100%;height:40px; } tabs li { float:left;margin-right:5px; } tabs li a { display:block; padding:3px 6px; text-decoration:none; } tabs li.on a { background:#DF29B9;color:#fff; } /* background for active tab */

.tab { display:none; } /* hide tabs */ .tab { border:1px solid #ddd;padding:15px;border-bottom:2px solid; }

XHTML

Tab 1 contents Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste

Tab 2 contents Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste

Tab 3 contents Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste

Tab 4 contents Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste

Tab 5 contents Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste

  1. $(function () {
  2.  
  3. var alltabs = $('div.tab'); //selector for all the tabs
  4. var tabs = $('#tabs'); //selector for the tab menu
  5. alltabs.first().show(); //show the first tab
  6. tabs.find('li:first').addClass('on'); //add class 'on' to the first li to set the item to active
  7.  
  8. tabs.find('a').live('click', function() {
  9. alltabs.hide()
  10. tabs.find('li').removeClass('on')
  11. $(this).parent().toggleClass('on')
  12. var tabref = $(this).attr('rel')
  13. $(tabref).fadeIn(500)
  14. this.blur()
  15. return false;
  16. })
  17.  
  18. }); //end domready

Report this snippet  

You need to login to post a comment.