HTML实现分页功能 |
您所在的位置：网站首页 › word分页的时候怎么横向分 › HTML实现分页功能 |
HTML实现分页功能
|
思路
主要是通过display: block和display: none来实现页面的切换。 将每个页面用一个div包起来，默认第一个页面的样式是display: block，其他页面的样式是display: none，然后通过JavaScript获取鼠标点击事件来隐藏其他页面，显示当前页面，达到页面切换的目的。 效果
首先创建一个项目，我的项目的目录结构大致如下图所示。 篇幅问题，这里就只详细放page部分的第一个页面的两个条目的代码作为例子了。 DOCTYPE html> 实现分页 第一页 第一条新闻 content 查看详情 第二条新闻 content 查看详情 第二页 ... ... 第三页 ... ... 第页 /;;;共页 .css文件 body { background: #efefef; } .page-block { width: 1100px; background: #efefef; margin: auto auto; } .page-block h1 { text-align: center; } .article-hover{ height: 150px; background: #ffffff; } .article-hover:hover{ background: #f8f8f8; } .thumbnail { width: 250px; height: 150px; display: flex; align-items: center; float: left; } .thumbnail img { width: 200px; height: 130px; margin: 0 auto; } .info-content { width: 850px; height: 150px; display: flex; flex-wrap: wrap; align-items: center; } .info-content a { color: #000000; text-decoration: none; display: inline-block; border: 1px solid #cdcdcd; padding:4px 10px 5px; border-radius: 10px; } .info-content a:hover { background: linear-gradient(to right,#FFCC00,#FF9900); color: #fff; } .li-title{ width: 850px; font-size: 24px; font-weight: 700; text-align: left; } .li-content{ width: 830px; font-size: 16px; font-weight: 400; text-align: left; } .page-icon{ width: 1200px; margin: 35px auto 0; font-size:0; text-align:center; } .page-icon button { border: none; background-color: #efefef; padding:4px 10px 5px; font-size:20px; } .page-icon button:nth-child(3), .page-icon button:nth-child(4) { cursor: default; } .page-icon button img { width: 15px; height: 15px; } #totalPage, #currentPage { cursor: default; border: none; background-color: #efefef; padding:4px 10px 5px; font-size:20PX; } #currentPage { cursor: auto; text-align: center; width: 40px; } .page-1{ display: block; } .page-2, .page-3{ display: none; } hr { opacity: 50%; } .js文件 // 定义一个数组，保存当前所有页面的class name var page_index = ["page-1", "page-2", "page-3"]; // 输入pagename，打开指定的div，隐藏其他的div function page_option(pagename){ var tar_index = page_index.indexOf(pagename); page_index.slice(tar_index, 1); for (var j = 0; j close_div[i].style.display="none"; }; } var opendiv = document.getElementsByClassName(pagename); for (var i = 0; i page_option("page-1"); document.getElementById('currentPage').value=1; } // 点击 跳到最后一页按钮 执行的操作 function last_click(){ var total_page = document.getElementById('totalPage').value; page_option(page_index[page_index.length - 1]); document.getElementById('currentPage').value=total_page; } // 点击 上一页按钮 执行的操作 function prev_click(){ var cur_page = document.getElementById('currentPage').value; if (cur_page > 1){ document.getElementById('currentPage').value=parseInt(cur_page)-1; var pagename = page_index[parseInt(cur_page)-2]; page_option(pagename); } } // 点击 下一页按钮 执行的操作 function next_click(){ var cur_page = document.getElementById('currentPage').value; var total_page = document.getElementById('totalPage').value; if (cur_page var cur_page = document.getElementById('currentPage').value; var pagename = page_index[parseInt(cur_page)-1]; page_option(pagename); } // 鼠标事件，经过每一条资讯时改变标题的颜色 function light(obj){ obj.firstElementChild.style.color="#FF9900"; } function normal(obj){ obj.firstElementChild.style.color="#000000"; } 完整代码链接我的代码放在github上，需要自取：https://github.com/Olin-YiYi/HTML-paging |
【本文地址】
今日新闻 |
推荐新闻 |