记录/TAB选项卡切换代码

2018-5-29 0 PHP代码 蓝优

HTML代码:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="tab-wrapper">
	<ul class="tab-menu">
		<li class="active">tab #1</li>
		<li>tab #2</li>
		<li>tab #3</li>
	</ul>
	<div class="tab-content">
		<div>
			tab #1
		</div>
		<div>
			tab #2
		</div>
		<div>
			tab #3
		</div>
	</div>
	<!-- //tab-content -->
</div>

JS代码:

$(document).ready(function() {
  
  var $wrapper = $('.tab-wrapper'),
      $allTabs = $wrapper.find('.tab-content > div'),
      $tabMenu = $wrapper.find('.tab-menu li'),
      $line = $('<div class="line"></div>').appendTo($tabMenu);
  
  $allTabs.not(':first-of-type').hide();  
  $tabMenu.filter(':first-of-type').find(':first').width('100%')
  
  $tabMenu.each(function(i) {
    $(this).attr('data-tab', 'tab'+i);
  });
  
  $allTabs.each(function(i) {
    $(this).attr('data-tab', 'tab'+i);
  });
  
  $tabMenu.on('click', function() {
    
    var dataTab = $(this).data('tab'),
        $getWrapper = $(this).closest($wrapper);
    
    $getWrapper.find($tabMenu).removeClass('active');
    $(this).addClass('active');
    
    $getWrapper.find('.line').width(0);
    $(this).find($line).animate({'width':'100%'}, 'fast');
    $getWrapper.find($allTabs).hide();
    $getWrapper.find($allTabs).filter('[data-tab='+dataTab+']').show();
  });

});


标签: 转载 博客日志
版权声明:若无特殊注明,本文皆《蓝优》原创,转载请保留文章出处。
本文链接:记录/TAB选项卡切换代码 - http://www.92mo.cn/daima/153.html

发表新评论

快捷功能: