首页 > JS专栏 > JS编写可左右滑动的Tab
2016
07-31

JS编写可左右滑动的Tab

直接上代码:

<ul class="course-tab">
	<li class="curr">章节</li>
	<li class="">详情</li>
	<li>评价</li>
</ul>
<div class="course-container">
	<div class="js-tab" style="display: block;">1</div>
	<div class="js-tab" style="display: none;">2</div>
	<div class="js-tab" style="display: none;">3</div>
</div>
<script type="text/javascript">
$(".course-tab").on("click", 'li', function() {
var $currItem = $(this),
index = $currItem.index();

$currItem.addClass('curr').siblings().removeClass('curr');
$(".js-tab").hide().eq(index).show();

});
</script>