第一次写博客有点小紧张,从这个例子开始我要正式开始我的前端学习之旅,以后会发表更多的文章,请各位大神指点一下。谢谢哦!
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页导航</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="js/lianxi.js"></script>
<link rel="stylesheet" href="css/lianxi.css"/>
</head>
<body>
<div class="page">
<ul>
<li class="prev">上一页</li>
<li class="pc active">1</li>
<li class="pc">2</li>
<li class="pc">3</li>
<li class="pc">4</li>
<li class="pc">5</li>
<li class="pc">6</li>
<li class="pc">7</li>
<li class="next">下一页</li>
</ul>
</div>
</body>
</html>
css:
.page{
font-size:20px;
padding:0 89px;
}
.page ul li{
float: left;
list-style-type: none;
border: 1px solid #CCCCCC;
width: 36px;
height:36px;
line-height: 36px;
margin-left: 20px;
text-align: center;
}
.page .active{
border: none;
font-size:16px;
}
.page .active:hover{
border: none;
background-color: #fff;
}
.page .prev,.page .next{
width: 89px;
}
.page ul li:hover{
border:1px solid #38f;
background-color: #B0E0E6;
}
.page .prev{
display: none;
}
jq:
$(function(){
var ul = $("ul");//获取ul元素
var ulList = ul.children();//获取li的个数
//点击页码
$(".page ul .pc").click(function(){
$(this).addClass("active").siblings(".pc").removeClass("active");
if($(".pc").text() !== ulList.length-8){
$(".prev").show();
}
//上一页
if($(".page .active").text() == ulList.length -8){
$(".prev").hide();
}else{
$(".prev").show();
}
//下一页
if($(".page .active").text() == ulList.length -2){
$(".next").hide();
}else{
$(".next").show();
}
});
//点击下一页
$(".next").click(function(){
$(".page .active").removeClass("active").next().addClass("active");
$(".prev").show();
if($(".page .active").text() == ulList.length -2){
$(".next").hide();
}else{
$(".next").show();
}
});
//点击上一页
$(".prev").click(function(){
$(".page .active").removeClass("active").prev().addClass("active");
$(".next").show();
if($(".page .active").text() == ulList.length -8){
$(".prev").hide();
}else{
$(".prev").show();
}
});
});
效果图: