//tab
//参数1:整体选项卡
//参数2:交互的btn
//参数3:要展现的内容
//参数4:交互的btn当前状态
//参数5:事件类型
function tabs(obj, nav, cont, cur, type){
    var c = cont;
    var obj = $(obj),
        nav = $(nav,obj),
        cont = $(cont,obj);

    nav.first().addClass(cur);
    cont.first().show();

    nav.each(function(index) {
        $(this).bind(type,function(){
            nav.removeClass(cur);
            $(this).addClass(cur);
            cont.hide();
            cont.eq(index).show();
        });
    });
}
tabs(".tab", ".tab-nav li", ".tab-item", "on", "click");

html 代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
.tab-item{
	width: 100px;
	height: 100px;
	background: #000;
	display: none;
	color: #fff

}
.tab-nav{

}
.tab-nav li{
	float: left;
	width: 20px;
	margin:10px;
	height: 20px;
	background: #ccc;
	list-style: none;
}
.tab-nav li.on{
	background: red;
}

	</style>
</head>
<body>
	<div class="tab">
		<div class="tab-item">1</div>
		<div class="tab-item">2</div>
		<div class="tab-item">3</div>
        <ol class="tab-nav">
        	<li>1</li>
        	<li>2</li>
        	<li>3</li>
        </ol>
	</div>
</body>
</html>

  

 很简单的选项卡效果,以后可以继续优化