如何创建分页

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".tab li").click(function(){
$(this).addClass("active").siblings().removeClass("active")
var index = $(this).index();
$(".con-li>li").eq(index).show().siblings().hide();
});
});

 

<ul class="tab clearfix">
<li class="active">大赛介绍</li>
<li>赛事安排</li>
<li>大赛奖励</li>
<li>常见问题</li>
</ul>
<div class="con">
<div class="wrap">
<ul class="con-li">

<li class="li_1">
<div class="text">
<h2><img src="img/pic1.jpg" align="absmiddle"/>大赛动态</h2>
</li>

<li class="li_2 hide">
<div class="title">
<h2>比赛主题：</h2>
</div>
</li>

<li class="li_3 hide">
<div class="prize">
<h2><img src="img/img1.jpg"/></h2>
</div>
</li>

<li class="li_4 hide">
<div class="text">
<h2>团队报名必须是一个学校吗？</h2>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

 

 

.hide{display: none;}

.main .tab{padding:50px 0 0 0;margin-bottom: 60px;}
.main .tab li{width: 250px;float: left;text-align: center;color: #666;font-size: 28px;border-bottom: 2px #e6e6e6 solid;padding-bottom: 15px; cursor: pointer;}
.main .tab .active{border-bottom: 4px #f9650c solid;color: #f9650c;padding-bottom: 13px;}
.main .con .con-li>li{padding-bottom: 60px;}

.main .con .li_1 .text{padding-bottom: 70px;}
.main .con .li_1 h2{font-size: 24px;color: #333;padding-bottom: 12px;}
.main .con .li_1 h2 img{margin-right: 4px;}

.main .con .li_2 .title{background:#f4f4f4;padding:23px;margin-bottom: 45px;}
.main .con .li_2 h2{font-size: 22px;padding-bottom: 15px;}

.main .con .li_3 .prize{padding:13px 0 36px;border:1px #ddd solid;border-radius: 5px;margin-bottom: 30px;}
.main .con .li_3 .prize h2{text-align: center;padding-bottom: 38px;}

.main .con .li_4 .text{padding-bottom: 40px;}
.main .con .li_4 .text h2{padding-left: 44px;font-size: 20px;background: url(../img/msn.jpg) no-repeat left center;line-height: 36px;}