JSFiddle - React, Tailwind, and code Playground

by vural kaya

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<ul id="tab">
	<li class="aktif"><a href="#">AngularJS</a></li>
	<li><a href="#">NodeJS</a></li>
	<li><a href="#">TreeJS</a></li>
</ul>	
<div class="clear"></div>
<div class="tab_icerik">AngularJS</div>	
<div class="tab_icerik">NodeJS</div>	
<div class="tab_icerik">TreeJS</div>

CSS

ul,li {padding: 0;margin: 0;list-style:none; }
a{text-decoration: none}
body{font: 13px Arial}
/*tab css*/
ul#tab{height: 20px;margin-bottom: 10px }
ul#tab li{float: left ;margin-left: 5px;height: 20px}
ul#tab li a{display: block;border : 1px solid #dfdfdf ; padding: 3px 7px;background-color:#fff;color:#99FF33; border-left-color:#e1e1e1;border-top-color:#e1e1e1;}
ul#tab li.aktif a{background-color: #333;color:#fff;border-color: #333}
.clear{clear: both;}
div.tab_icerik{border:2px solid #ddd;padding: 10px;color:#aaa;}

JavaScript

$(function(){
 	$("ul#tab li:first").addClass("aktif");
 	$("di.tab_icerik").hide();
 	$("div.tab_icerik:first").show();

 	$("ul#tab li").click(function(){
 		var index = $(this).index(); 
 		$("ul#tab li").removeClass("aktif");
 		$("this").addClass("aktif");
 		$("div.tab_icerik").slideUp();
 		$("div.tab_icerik:eq("+ index +")").slideDown(300);
 		return false	
 	});
});