<!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>