<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{ padding:0;margin: 0;}
.example{ width: 500px;height: 400px; margin: 50px auto 0 auto; }
#mytab{ width: 100px; float: left; border-left: 1px solid lightgray; border-bottom:1px solid lightgray;}
#mytab li{ list-style-type: none; border-top: 1px solid lightgray; border-right:1px solid lightgray;height: 30px;line-height: 30px;text-align: center;}
#mytab li.active{ border-right:1px solid #ffffff;}
#mytabContent{float: left;}
#mytabContent div{ display: none;}
#mytabContent div.active{display: block;}
#mytabContent div p{padding: 10px;}
</style>
</head>
<body>
<div class="example">
<ul id="mytab" class="nav">
<li class="active"><a>First</a></li>
<li><a>Second</a></li>
<li><a>Third</a></li>
<li><a>Fourth</a></li>
</ul>
<div id="mytabContent">
<div class="tab-pane active">
<p>This is First</p>
</div>
<div class="tab-pane">
<p>This is Second</p>
</div>
<div class="tab-pane">
<p>This is Third</p>
</div>
<div class="tab-pane">
<p>This is Fourth</p>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(function(){
$("#mytab").find("li").click(function(){
$(this)
.siblings("li")
.removeClass("active")
.end()
.addClass("active"); var index= $("#mytab").find("li").index($(this));
if(index>=0){
var targetContent=$("#mytabContent").find("div").eq(index);
targetContent
.siblings("div")
.removeClass("active")
.end()
.addClass("active");
}else
{
alert("nima");
} });
});
</script>
</body>
</html>