网页简单分页效果

最新推荐文章于 2023-10-26 11:32:08 发布

rosie同学

最新推荐文章于 2023-10-26 11:32:08 发布

阅读量486

点赞数

分类专栏： web开发

本文链接：https://blog.csdn.net/Johan666/article/details/104478653

版权

web开发专栏收录该内容

5 篇文章 2 订阅

订阅专栏

准备四张箭头的图片，两张黑，两张灰就行啦。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		.body li {
			width: 90%;
			height: 500px;
			margin: auto;
			background-color: yellow;
		}
		/*分页*/
		.page-icon{
			text-align:center;
			width: 50%;
			height: 50px;
			margin-left: auto;
		}
		/*数字分页*/
		.page-icon li{
			width: 6%;
			height: 80%;
			float: left;
			border:1px solid #ccc;
			border-radius:3px;
			margin-right: 5px;
			margin-left: 5px;
			cursor: pointer;
		}
		.page-icon li:first-of-type{
			background-color: #2980B9;
			color: white;
		}
		/*点击分页样式*/
		/*.page-current{
			background-color:#2980B9;
			color: white;	
		}*/
		/*上一页，下一页*/
		.page-next,.page-last{
			border:1px solid #ccc;
			border-radius:3px;
			width:12%;
			height:80%;
			float: left;
			margin-right: 5px;
			margin-left: 5px;	
			cursor: pointer;
			display:flex;
			align-items: center;
			justify-content: center;
		}
		.page-last{
			margin-left: 20%;
			color: gray;
		}
		/*两个小箭头*/
		.page-next img,.page-last img{
			cursor:pointer;
			display:inline-block;
			width: 10px;
			height: 10px;
			margin: 2px;
		}
		</style>
	</head>
	<body>
		<ul class="body">
			<!--当然如果有很多分页可以在js用html进行append或者用v-for，简化代码-->
			<li class="body1"style="display: block;">我是分页1</li>
			<li class="body2"style="display: none;">我是分页2</li>
			<li class="body3"style="display: none;">我是分页3</li>
			<li class="body4"style="display: none;">我是分页4</li>
			<li class="body5"style="display: none;">我是分页5</li>
			<li class="body6"style="display: none;">我是分页6</li>
		</ul>
		<div class="page-icon">
			<ul>
				<span class="page-last"><img src="img/arrow_left_gray.png"id="arrow_left"/>上一页</span>
			    <li id="page1"onclick="click_page('#page1','.body1')">1</li>
			    <li id="page2"onclick="click_page('#page2','.body2')">2</li>
			    <li id="page3"onclick="click_page('#page3','.body3')">3</li>
			    <li id="page4"onclick="click_page('#page4','.body4')">4</li>
			    <li id="page5"onclick="click_page('#page5','.body5')">5</li>
			    <li id="page6"onclick="click_page('#page6','.body6')">6</li>
			    <span class="page-next">下一页<img src="img/arrow_right.png"id="arrow_right"/></span>
			</ul>
		</div>
	</body>
		<script src="js/jquery-1.9.1.min.js"></script>
	<script>
		//当前页
        	var index=1;
        	var left=document.getElementById("arrow_left");
			var right=document.getElementById("arrow_right");
        	function click_page(a,b){
//      		同样的效果，默认1是被点击了
//      		$(a).siblings().removeClass("page-current");
//	            $(a).addClass("page-current");
//	            if(a!='#page1'){
//	            	$('#page1').css("background-color","white");
//	            	$('#page1').css("color","#000000");
//	            }else{
//	            	$('#page1').css("background-color","#2980B9");
//	            	$('#page1').css('color','white');
//	            }
				$(a).siblings().css("background-color","white");
				$(a).siblings().css("color","black");
            	$(a).css("background-color","#2980B9");
            	$(a).css("color","white");
            	
            	$(b).siblings().css("display","none");
            	$(b).css("display","block");
            	left.src="img/arrow_left.png";
            	right.src="img/arrow_right.png";
            	index=$(a).text();
            	if(index==1){
					$('.page-last').css("color","#bfbfbf");
					left.src='img/arrow_left_gray.png';
        		}
            	if(index==6){
					$('.page-next').css("color","#bfbfbf");
					right.src='img/arrow_right_gray.png';
        		}
        	}
        	$(".page-last").on('click',function(){
        			index--;
					click_page('#page'+index,'.body'+index);
        	})
        	$(".page-next").on('click',function(){
					index++;
					click_page('#page'+index,'.body'+index);
    		})
	</script>
</html>

rosie同学

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
网页简单分页效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .bo...
复制链接

扫一扫