JSFiddle - React, Tailwind, and code Playground

by web163

HTML

<script src="https://code.jquery.com/jquery-1.8.2.js"></script>


<div id="wrap">
		<div class="selectTabs">
			<ul class="lineTabs">
				<li><a href="#" class="active">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
			</ul>            
			<div class="content">
				<div class="tab1" style="display:block;">
					1_1<br>
					1_2<br>
					1_3<br>
					1_4<br>
					1_5<br>
				</div>
				<div class="tab2">
					2_1<br>
					2_2<br>
					2_3<br>
					2_4<br>
					2_5<br>
				</div>
				<div class="tab3">
					3_1<br>
					3_2<br>
					3_3<br>
					3_4<br>
					3_5<br>
				</div>
			</div>
		</div>
	</div>

CSS

.content div
{
	display:none;
}

JavaScript

$(document).ready(function(){
	$(".selectTabs").each(function () {
		var tmp = $(this);
		console.log($(tmp).find(" .lineTabs li"));
		$(tmp).find(".lineTabs li").each(function (i) {
			$(tmp).find(".lineTabs li:eq("+i+") a").click(function(){
				var tab_id=i+1;
				$(tmp).find(".lineTabs li a").removeClass("active");
				$(this).addClass("active");
				$(tmp).find(".content div").stop(false,false).hide();
				$(tmp).find(".tab"+tab_id).stop(false,false).show();
				return false;
			})
		})
	})
})