HTML怎么分页，index.html#home为第一个页面，以此类推？

html-css07

HTML怎么分页，index.html#home为第一个页面，以此类推？,第1张

类似#home这种链接是在一个页面内的跳转，跳转到的位置我们称之为“锚点”。下面的代码存到index.html即可查看效果<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div style="position: fixedtop: 0left: 0background-color: #fff"><a href="#home">首页</a><a href="#page2">page2</a><a href="#page3">page3</a></div><div style="height: 800pxborder: 1px solid #dddpadding-top: 35px"><a id="home"></a><br><br>这里是首页部分</div><div style="height: 800pxborder: 1px solid #dddpadding-top: 35px"><a id="page2"></a><br><br>这里是page2部分</div><div style="height: 1000pxborder: 1px solid #dddpadding-top: 35px"><a id="page3"></a><br><br>这里是page3部分</div></body></html>

一般html网页，可以采用div的css属性控制显示和隐藏来实现分页的目的。

display:block这个css属性可以让div显示出来；

display:none这个css属性可以让div隐藏起来；

例如：

<div id="page1" style="display:block">这是第1页的内容</div>

<div id="page2" style="display:none">这是第2页的内容</div>

<div id="page3" style="display:none">这是第3页的内容</div>

然后增加3个按钮，分别是第1页，第2页，第3页，每个按钮有点击事情。

例如：

<a href="javascript:showpage(1)">第1页</a>

<a href="javascript:showpage(2)">第2页</a>

<a href="javascript:showpage(3)">第3页</a>

4

然后通过javascript点击事情来修改div的css属性display的值，就可以达到切换页面的目的了。

例如：

<script>

function showpage(page){

for(var i=1i<=3i++) {

if (page==i){

document.getElementById("page"+page).style.display="block"

} else {

document.getElementById("page"+page).style.display="none"

}

}

}

</script>

page=2是get方法提交的参数，在有分页的时候用的。比方你的news页面有20条新闻，但是您不想一下都显示出来，这时候你可以分成两页显示。你可以看有分页的页面链接，都会有page的。就爱偷偷笑