main.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. jQuery(document).ready(function($){
  2. var tabs = $('.cd-tabs');
  3. tabs.each(function(){
  4. var tab = $(this),
  5. tabItems = tab.find('ul.cd-tabs-navigation'),
  6. tabContentWrapper = tab.children('ul.cd-tabs-content'),
  7. tabNavigation = tab.find('nav');
  8. tabItems.on('click', 'a', function(event){
  9. event.preventDefault();
  10. var selectedItem = $(this);
  11. if( !selectedItem.hasClass('selected') ) {
  12. var selectedTab = selectedItem.data('content'),
  13. selectedContent = tabContentWrapper.find('li[data-content="'+selectedTab+'"]'),
  14. slectedContentHeight = selectedContent.innerHeight();
  15. tabItems.find('a.selected').removeClass('selected');
  16. selectedItem.addClass('selected');
  17. selectedContent.addClass('selected').siblings('li').removeClass('selected');
  18. //animate tabContentWrapper height when content changes
  19. tabContentWrapper.animate({
  20. 'height': slectedContentHeight
  21. }, 200);
  22. }
  23. });
  24. //hide the .cd-tabs::after element when tabbed navigation has scrolled to the end (mobile version)
  25. checkScrolling(tabNavigation);
  26. tabNavigation.on('scroll', function(){
  27. checkScrolling($(this));
  28. });
  29. });
  30. $(window).on('resize', function(){
  31. tabs.each(function(){
  32. var tab = $(this);
  33. checkScrolling(tab.find('nav'));
  34. tab.find('.cd-tabs-content').css('height', 'auto');
  35. });
  36. });
  37. function checkScrolling(tabs){
  38. var totalTabWidth = parseInt(tabs.children('.cd-tabs-navigation').width()),
  39. tabsViewport = parseInt(tabs.width());
  40. if( tabs.scrollLeft() >= totalTabWidth - tabsViewport) {
  41. tabs.parent('.cd-tabs').addClass('is-ended');
  42. } else {
  43. tabs.parent('.cd-tabs').removeClass('is-ended');
  44. }
  45. }
  46. });