Advanced Search

simple tab interface

/ Published in: jQuery
Save to your folder(s)
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

<ul>
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
<li><a href="#">Tab 5</a></li>
</ul>

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


Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.