页码demo制作

Posted 2020-11-17 funkyeric

静态Dom结构：

    <div class="page-normal">
        <span class="pre-page">&lt;</span>
        <span class="current-page">1</span>
        <a href="#" class="other-page">2</a>
        <a href="#" class="other-page">3</a>
        <a href="#" class="other-page">4</a>
        <a href="#" class="other-page">5</a>
        <a href="#" class="other-page">6</a>
        <span class="apos">...</span>
        <a href="#" class="other-page">199</a>
        <a href="#" class="other-page">200</a>
        <a href="#" class="last-page">&gt;</a>
    </div>

 

CSS注意部分：

1.内联标签之间有自带的间隙，将容器的父元素font-size设置为0就可以去除这个bug，或者使内敛标签的代码之间没有空格。

2.display: inline 只有文字影响布局，边框以及内外边距无法撑开容器。但是display：inline-block可以撑起父元素，整个标签都影响布局。

2.容器设置text-align对inline和inline-block 都有居中的作用。

 

javascript思路：

1.对page-normal所有子元素添加监听事件；

2.对pre-page和last-page设置，如果current-page为起始或者末尾，将pre-page或者last-page改为对应的span或者a标签。

2.监听点击事件，如果不是a标签，return。如果是，则跳转相应链接，再执行以下操作。

3.将current-page标签替换为a标签，将此a标签替换为class为current-page的span标签。